CODEWITHSUNDEEP
javascriptjqueryheadernavbarsticky
Parzi
Parzi

Reputation: 704

Fixed secondary Nav bar after scrolling

I was looking through some of the posts and I found most my answer however it's still not working properly for me.

http://jsfiddle.net/5n5MA/619/

The bar you see on the jsfiddle should be catching lower than the top because there is a fixed header that will be there on my main site this secondary bar is supposed to go below it. I can get it to be fixed on jsfiddle but not on my site. And as you can see it is shrinking when it changes to fixed.

HTML: 

<header>
    <img class="logo" src="images/headerLogo.png">
    <p class="about lighter">ABOUT US</p>
    <p class="contact lighter">CONTACT US</p>
    <img class="getStarted" src="images/getStarted.png">
</header>

<div class="mainSection1">
    <h1>SAVE TIME & MONEY</h1>
    <h2 class="lighter">CONCIERGE HAS ALL THE ANSWERS</h2>

    <p>$79.99 VALUE<br>FREE FOR YOUR CLIENTS</p>

    <img class="getStarted" src="images/getStarted.png">
</div>

<div class="subBar">
<p class="first">VALUE</p> <p class="second">SERVICES</p> <p class="third">BRANDS</p> <p class="fourth">HOW IT WORKS</p>
</div>

JS: 

var nav = $('.subBar');
if (nav.length) {
    var fixmeTop = nav.offset().top -100;
    $(window).scroll(function () {
        var currentScroll = $(window).scrollTop();
        if (currentScroll >= fixmeTop) {
            $('.subBar').css({
                position: 'fixed',
                width: '100%',
                top: '73px',
                left: '0'
            });
            $('header').css(
                    'box-shadow', 'inherit'
            );
        } else {
            $('.subBar').css({
                position: 'static'
            });
            $('header').css(
                    'box-shadow', '0px 5px 9px #515151'
            );
        }
    });
}

css:

.subBar {
    background: #F1F1F2;
    height: 65px;
}

.subBar p:first-child {
    margin-left: 15%;
    border-left: 1px solid #bbbdc0;
}

.subBar p {
    float: left;
    border-right: 1px solid #bbbdc0;
    width: 17%;
    text-align: center;
    height: 44px;
    margin-top: 0px;
    padding-top: 21px;
    font-weight: lighter;
}

Upvotes: 1

Views: 2166

Answers (2)

Parzi
Parzi

Reputation: 704

Issue has been solved! I decided to make a second navbar that starts hidden than is shown when I scroll down enough. It seems to be way less jumpy and isn't taking the original bar out of the dom (which messes with other elements below it).

Upvotes: 0

Kunjan Thadani
Kunjan Thadani

Reputation: 1670

This is because the div .subBar is not given any width.

Because of this it's width get shrinked when it's position becomes fixed, taking it to be auto by default.

So specify a fixed width. It will take that width in any position.

Also, you need to have some margin on left and right so that it stays the same as you want.

You can make the following changes:

.subBar {
    background: #F1F1F2;
    height: 65px;
    width:100%;
}

Another more accurate solution: Change in the jquery

if (currentScroll >= fixmeTop) {
            $('.subBar').css({
                position: 'fixed',
                top: '72px'

            });
        } else {
            $('.subBar').css({
                position: 'static',
                width:'auto';
            });
        }

Check the FIDDLE.

Upvotes: 1

Related Questions