Provide zblog template_zblog them_wordpress template download and customization

The special effect fixed on the top after the navigation bar is pulled down to a certain height

Tianxing Studio 2015-09-21 22:44 course forty thousand five hundred and ninety-four 20 Comments


Well, I'm tired after playing outside for a few days. But the article should be updated, otherwise Baidu will not like me

Water Today“ navigation bar The special effect fixed on the top after being pulled down to a certain height ". Some students like to call it follow navigation. Anyway, that's what it means. Code directly first:

 <script type="text/javascript"> $(function(){ var nav=$(".nav"); //Get navigation object var win=$(window); //Get Window Object var sc=$(document);// Get the document document object. win.scroll(function(){   if(sc.scrollTop()>=100){     nav.addClass("fixednav");     }else{    nav.removeClass("fixednav");   } })   }) </script>

Put this js in the page to achieve the effect, and then we need to change the. nav in the third line to the class of your own page navigation bar; the "100" in the seventh line is to trigger the special effect when it is pulled down to 100 pixels, which can be modified to the appropriate height.

Then add this attribute in the css file:

 .fixednav {     position: fixed;     top: 0px;     left: 0px;     width: 100%;     z-index: 999; }

This is almost complete.

About the meaning of this js, when it is pulled down to a certain height, insert a "fixednav" attribute to the div in the navigation bar, and then add a parameter fixed at the top to the "fixednav".

Well, please try your best. If you don't understand something, please leave a message in the comment area below this article. Please don't add me to QQ directly


Can't find a tutorial that can solve your problem?

You can try to search or ask questions directly online. We also provide charging technical support. If you need it, you can contact us online.

Online questions Online Service

yes twenty Comments from netizens:

  •  wjy329

    wjy329 Five years ago (2019-06-04) reply

    The personal test is available, thank the blogger.

  •  Netizens of Tianxing Studio

    Netizens of Tianxing Studio Six years ago (2018-09-23) reply

    God wants to ask how to change the background color when scrolling the next page

    •  Tianxing Studio

      Tianxing Studio Six years ago (2018-09-23) reply

      There should be css code in the article. Just add a color in it, not just Baidu w3c

  •  Netizens of Tianxing Studio

    Netizens of Tianxing Studio Six years ago (2018-08-04) reply

    . fixednav sets the attribute on the jsp page

  •  Netizens of Tianxing Studio

    Netizens of Tianxing Studio Six years ago (2018-06-27) reply

    Great Really

  •  Netizens of Tianxing Studio

    Netizens of Tianxing Studio Six years ago (April 30, 2018) reply

    No, html doesn't respond

  •  Xie Xiao'an

    Xie Xiao'an Six years ago (2018-01-25) reply

    Extremely powerful, super easy to use [very powerful writing!]

  •  green hand

    green hand Six years ago (2018-01-06) reply

    Js cannot be used, and the effect cannot be reflected

    •  green hand

      green hand Six years ago (2018-01-06) reply

      It's just that js has no effect

  •  Brother Haha

    Brother Haha Six years ago (2018-01-03) reply

    Can't use it, landlord

  •  Cheng Xubin

    Cheng Xubin Seven years ago (2017-12-13) reply

    What about the one with fixed bottom? How to change the scrolling height? Is the height of the page minus the height of the bottom div and then minus the height of the scroll bar, but how is the height of the scroll bar calculated?

  •  Small

    Small Seven years ago (2017-12-05) reply

    Since we don't see html, we don't know which element is added by the navTmp classmaster. Can we explain it

welcome you Comment: Cancel Reply

 Please fill in the verification code
  • Latest articles
  • Hot article ranking
  • Most Comments
Label aggregation
  • Sign in
  • Registered account Forgot your password?
  • register
  • Already have an account? Direct login Forgot your password?
  • Social account login