jquery 2.2: navbar fixed on scroll not working with vh-unit -

-

i found on topic doesn't me out here: how implement scroll fixed effect?

i'm trying implement navbar, sticks top when user scrolled on header-section can seen here: https://teamtreehouse.com/community/forum-tip-create-a-sticky-navigation-with-css-and-jquery-2

however, since i'm using vh , vw units in project, got problems getting jquery work. it's working fine, if use px like

... if ($(this).scrolltop() > 400 ) ...

but 

... if ($(this).scrolltop() > $("#slider_part").height ...

it's not working.

see code below. , in advance answers!

my html:  <header id="slider_part">   <div>...</div> </header> <div id="main-nav" class="navbar">  <nav>...</nav> </div>  css:  #slider_part {    height: 85vh;    width: 100%;    overflow:hidden;    position: fixed;    top: 0;    z-index: -100;    }  #main-nav {    position: relative;    background: #db2f27;    -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.12);    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.12);    z-index: 150;    border: none !important;    }  .navbar {   height: 15vh;   width: 100vw;   border-radius: 0 !important;   margin-bottom: 0 !important;   }  .main-nav-scrolled {   width: 100vw;   position: fixed !important;   top: 0;   }  jquery:  var mn = $(".navbar");  $(window).scroll(function(){     if ($(this).scrolltop() > $("#slider_part").height ) {         mn.addclass("main-nav-scrolled");     }     else {         mn.removeclass("main-nav-scrolled");     } });

check errors in console, have missed () .height() method: 

if ($(this).scrolltop() > $("#slider_part").height() ) {

another suggestion use .toggleclass() method: 

$(window).scroll(function(){     mn.toggleclass('main-nav-scrolled', $(this).scrolltop() > $("#slider_part").height()); });

in above example class added when condition true , removed when false.


Comments

Post a Comment

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

-
i beginner in autocad plugins .i have created array of circle using following code. now, have hatch circles in array .how that??how hatch circles @ once? moreover, how can return hatch method , use hatch objects.sorry language.thanks in advance. [assembly: commandclass(typeof(beamsection.class1))] namespace beamsection { public class class1 { //class1 obj = new class1(); [commandmethod("beamatsupport")] public void addlightweightpolyline() { // current document , database document acdoc = application.documentmanager.mdiactivedocument; database accurdb = acdoc.database; promptpointresult ppr = acdoc.editor.getpoint("\nselect starting point "); var ucs = acdoc.editor.currentusercoordinatesystem; point3d startingpt = ppr.value.transformby(ucs); list<double> radius = new list<double>(); radius.add(0.5); ...
Read more

ios - UITEXTFIELD InputView Uipicker not working in swift -

-
hello trying pop uipickerview view programmatically when user clicks on textfield. have tried doesn't doing anything. isn't working. nothing happening when click textfield class userprofiletableviewcontroller: uitableviewcontroller,uitextfielddelegate,uipickerviewdelegate,uipickerviewdatasource { var itempicker: uipickerview! = uipickerview() @iboutlet weak var gendertxtfield: uitextfield! var gender = ["male","female"] override func viewdidload() { super.viewdidload() gendertxtfield.delegate = self itempicker!.delegate = self itempicker!.datasource = self itempicker!.backgroundcolor = uicolor.blackcolor() self.gendertxtfield.inputview = itempicker } func numberofcomponentsinpickerview(pickerview: uipickerview) -> int{ return 1 } // returns # of rows in each component.. func pickerview(pickerview: uipickerview, numberofrowsincomponent component:...
Read more