Sticky scrolling navigation bar effect implemented by jQuery-JS Tutorial-php.cn

Sticky scrolling navigation bar effect implemented by jQuery

小云云

Release： 2018-01-09 10:26:09

Original

2501 people have browsed it

Sticky scrolling is when the navigation will stick to the browser during the scrolling process to achieve the effect of convenient website page browsing, which is also a user experience. This article mainly introduces the sticky scrolling navigation bar effect implemented by jQuery, involving the jQuery plug-in The related usage skills of smint are provided with complete example source code for readers to download and refer to. Friends who need it can refer to it. I hope it can help everyone.

Let’s take a look at how it is implemented:

jQuery’s smint plug-in is also a navigation menu fixed plug-in. When the page scrolls, the navigation menu will be fixed at the top; when the menu is clicked, the page will smoothly scroll to the corresponding area.

Compatibility

Because smint uses position: fixed, it is not compatible with IE6. Applicable browsers: IE8, 360, FireFox, Chrome, Safari, Opera, Maxthon, Sogou, Window of the World.

Introducing files

<link href="css/demo.css" rel="external nofollow" rel="stylesheet" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.smint.js"></script>

Copy after login

HTML

<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">
<p class="wrap">
  <p class="subMenu">
    <p class="inner">
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="sTop" class="subNavBtn">Home</a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s1" class="subNavBtn">Section 1</a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s2" class="subNavBtn">Section 2</a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s3" class="subNavBtn">Section 3</a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s4" class="subNavBtn">Section 4</a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s5" class="subNavBtn end">Section 5</a>
    </p>
  </p>
  <p class="section sTop">
    <p class="inner"></p><br class="clear">
  </p>
  <p class="section s1">
    <p class="inner"><h1>Section 1</h1></p>
  </p>
  <p class="section s2">
    <p class="inner"><h1>Section 2</h1></p>
  </p>
  <p class="section s3">
    <p class="inner"><h1>Section 3</h1></p>
  </p>
  <p class="section s4">
    <p class="inner"><h1>Section 4</h1></p>
  </p>
  <p class="section s5">
    <p class="inner"><h1>Section 5</h1></p>
  </p>
</p>
</body>

Copy after login

Note: Menu The external container (such as the subMenu in the above example) needs to set the style position:absolute, and the a tag of each menu needs to set an id. The value of the id is consistent with the value of the class in the corresponding area below.

JavaScript

$(function() {
  $('.subMenu').smint({
    scrollSpeed : 1000
  });
});

Copy after login

Related recommendations:

detailed example of how jQuery implements the method of changing the color of the navigation bar header menu item after clicking it

JavaScript to implement personalized navigation bar special effects

JavaScript to implement the sample code of exquisite personalized navigation bar somersault cloud effect

The above is the detailed content of Sticky scrolling navigation bar effect implemented by jQuery. For more information, please follow other related articles on the PHP Chinese website!