Forums

  • # July 8, 2014 at 5:06 am

    Howdy,

    I’ve been using this great little plug-in called Stickem made by Trevor Davis at Viget. You can see the demo here.

    I downloaded the demo and updated the mark-up and classes to match what I have on my page – which worked great. Then I updated some of the CSS and the page stopped working…

    I have 100% height set on <html>, <body>, <div class="container"> and <div class="mid">. Which stops the plug-in from working (adding the class to the sticky element). Presumably because the 100% height on the elements means it has no point of reference for when the element I want to ‘stick’ has touched the top of the browser.

    The reason for the 100% height div’s:
    The header and footer are fixed at the top and bottom of the browser window. The “container” div is just inside the body and is needed for my off-canvas navigation. The #mid element has top/bottom padding so the content does not go behind the fixed header/footer and height: 100%; is declared to it sits between the header/footer and scrollbar (when visible) does not run behind. Obviously because of this, its parents (html > body > #container) all need height: 100%; too for the height to work on the #mid element.

    Does anyone know of a way possible around this? Maybe by targeting the position of #mid instead? Or is it just a case that it won’t work if the html/body are set with 100% height?

    Cheers,
    Steve

    # July 14, 2014 at 6:54 pm

    Do you have a live code example of your work?

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag