Give help. Get help.

  • # February 28, 2018 at 1:58 am

    Hi there,

    I’m trying to add a navbar that remains fixed to the top of the browser window when it hits the top. The problem I’m having is all the content below it jumps up as the navbar is removed from the natural flow of the page.

    I’ve used plugins in the past but I’m trying to streamline it a bit with some ‘simple’ jQuery. The example I’m working on is this:

    A few things to note:

    1. The height of .page-head (nav) could change so setting a height of it in the CSS won’t work.
    2. The .info-bar on the top can be removed at times. But as that is not fixed I don’t think it’s a problem?

    Also you can’t see this in CodePen but I had a problem where if I scrolled down half the page and refreshed the browser the nav stayed fixed but the class was note added (I use this to add a shadow when the element becomes fixed). And when I scrolled up past where the navbar was fixed after the refresh the bar became un-fixed even though it was halfway down the page. Like the bar was treating it’s starting point as the actual top of the browser.

    Any ideas?

    # February 28, 2018 at 5:31 pm

    The fix for the jumping is to add some margin equal to the height of .page-head, when you give it fixed position it is taken out of the document flow which makes the content adapt its position.

    Imma have to look a bit more at the other descriptions…

    # February 28, 2018 at 11:15 pm

    Firing a scroll event when the page loads should fix the other issue (added that to the code), for most browsers. Opera is known to be stubborn with caching the scroll position.

    # March 1, 2018 at 10:04 am

    Thanks man, that looks like it works great! I was trying to use position: sticky with a Polyfill, which looked like it worked fine but I also have a slide-out menu on mobile and although the plugin had a fix for sticky menus, when the menu was shown the nav bar would jump/flicker which didn’t look great! There fix works a lot better with position: fixed though!

    Out of interest, whats the code for .info-bar do?

    Also as I may have several .band divs on a page, am I ok to use core = $('.band:first-child') or maybe core = $('.page-head + .band') to make sure it doesn’t interfere with anything else by accident?

    # March 1, 2018 at 1:35 pm

    You could use $('.band').eq(0), seems easiest. First item, zero indexed.

    The line with .info-bar calculates the sticky switching point, I think you accidentally used the main nav itself before…

    # March 1, 2018 at 3:36 pm

    I’ve put them inside a resize handler (and fire a single resize after that for the first calculation), just in case the height of the elements change with different screens.

    # March 3, 2018 at 7:18 am

    That’s great, works really well! :)

    I actually moved the class so it was applied onto the body. When a product is added to the basket a pop up appears. So that allows me to change the position of the basket as well so it’s always the same distance from the basket text.

    # March 24, 2018 at 8:16 am

    Just thought I’d ask (hopefully) one final question on this without starting a new thread, I know it’s been a while!

    I’ve just applied a background image to one of the .band elements inline and it looks like the script strips the styling when it’s trying to calculate if it needs padding or not. Is it possible to only removing the padding or will I need to set the images in the CSS with a class/ID?

    That wouldn’t be too bad but I thought I’d ask first as I think the client would like the image to be swapped out in the CMS so it would probably need to be inline unfortunately. What do you think?

    # March 24, 2018 at 4:33 pm

    Give this a try…

    Instead of emptying the attribute, it reverts it to the initial state.

    # April 5, 2018 at 12:33 pm

    That’s great @shikkediel, thanks a lot (again)! :)

    # April 6, 2018 at 3:59 am

    No problem mate. Glad to.

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

You must be logged in to reply to this topic.