javascript - Want to Change Settings in js while it crosses certain position -
i'm creating navbar & i'm using bootstrap this.
i'm using padding top 60px while nav transparent
here nav code
.navbar-default .navbar-nav > li > { padding-top: 60px; }
and navbar-brand class
.navbar-brand{ padding-top:30px; } when navbar scrolls > 100 looks
now want make 30px when scroll > 100 here js code
var = $(".navbar-default").offset().top; $(document).on('scroll', function() { if ($(this).scrolltop() > 100) { $('.navbar-default').addclass("scrolled"); $(".navbar-default .navbar-brand").css({ "color": "#a96258" }); } else { $('.navbar-default').removeclass("scrolled"); $(".navbar-default .navbar-brand").css({ "color": "#fff" }); } });
my scrolled class
.navbar-default.scrolled{ background-color: #fff; border-bottom: 1px solid #bbb9be; box-shadow: 0,0,2px,#bbb9be; color: #000; min-height: 80px; }
try attaching window.scroll
below:
$(window).scroll(function() { if ($(window).scrolltop() > 100) { $('.navbar-default').addclass("scrolled"); $(".navbar-default .navbar-brand").css({ "color": "#a96258" }); } else { $('.navbar-default').removeclass("scrolled"); $(".navbar-default .navbar-brand").css({ "color": "#fff" }); } });
or alternatively can add event listener below
var element = $(".navbar-default"); window.addeventlistener('scroll', function() { $(window).scrolltop() > 100 ? $(element).addclass('scrolled',function(){ $(".navbar-default .navbar-brand").css({ "color": "#a96258" }); }) : $(element).removeclass('scrolled',function(){ $(".navbar-default .navbar-brand").css({ "color": "#fff" }); }); });