CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Finity Digital
Finity Digital

Reputation: 11

Add and Remove Class On Scroll

I'm working on an HTML page with a small navigation that starts out about halfway down the page. I want the navigation bar to stick to the top of the page (become fixed) when it reaches the top of the page. My attempt looked like this:

The script:

<script>
$(function() {
    var header = $(".clearHeader");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if (scroll >= 100) {
            header.removeClass('scrollHeader').addClass("fixedHeader");
        } else {
            header.removeClass("fixedHeader").addClass('scrollHeader');
        }
    });
});

</script>

The HTML:

<div class="scrollHeader">
            <div class="row" style="background:#444;">
            <div class="container">
            <a href="#"><div class="col-sm-3 smallNav">
            Perks
            </div></a>
            <a href="#"><div class="col-sm-3 smallNav">
            Growth
            </div></a>
            <a href="#"><div class="col-sm-3 smallNav">
            Technology
            </div></a>
            <a href="#"><div class="col-sm-3 smallNav">
            Apply
            </div></a>
            </div>
            </div>
            </div>

The CSS:

.scrollHeader { position: relative !important;}
.fixedHeader {position: fixed !important; }

Nevertheless, this code doesn't work. Any suggestions? I have jQuery 1.9.1 loaded. Fiddle

Upvotes: 0

Views: 5461

Answers (3)

Lewis Carey
Lewis Carey

Reputation: 11

Just from a quick look, I am not sure if you are targeting the right object at the start of your code.

var header = $(".clearHeader");

But in your HTML, nothing is of class "clearHeader", so this would not work. Perhaps changing it to

var header = $(".scrollHeader");

Would do the trick?

Edit: also adding top:0px; to your fixedHeader class will make the nav stick to the top of the page.

Fiddle: http://jsfiddle.net/5d7ymoc0/2/

BONUS super smooth nav scroll action: http://jsfiddle.net/5d7ymoc0/4/

Upvotes: 1

Larry Lane
Larry Lane

Reputation: 2191

If you want the header to stick to the top on scroll I believe this is what you want.

example jsfiddle: http://jsfiddle.net/5d7ymoc0/3/

change to javascript:

           $(function() {

             $(window).scroll(function() {    

        //fix the header to the top
      $(".smallNav").css({"position":"fixed","top":"0px"});



       });
        });

change to css: 

   scrollHeader { position: relative !important;}
   .fixedHeader {position: fixed !important; }
   .smallNav {background: #333; color: #fff !important;padding: 10px;font-size: 20px; text-align:      center; }
   .wrapper {height: 2000px;}

Upvotes: 0

GoreDefex
GoreDefex

Reputation: 1531

Is $('.clearHeader') supposed to be $('.scrollHeader') ?

Is so...

$(function() {

    navPos = $(".scrollHeader").position().top;

    $(window).scroll(function() {    
        if(navPos>0 && $(window).scrollTop()>navPos) {              
            $(".navbar").addClass("navbar-fixed-top");
        } else {
            $(".navbar").removeClass("navbar-fixed-top");
        }

        if (scroll >= ) {
            header.removeClass('scrollHeader').addClass("fixedHeader");
        } else {
            header.removeClass("fixedHeader").addClass('scrollHeader');
        }
    });
});

Upvotes: 0

Related Questions