search

Home  >  Article  >  Web Front-end  >  Sticky scrolling navigation bar effect implemented by jQuery

Sticky scrolling navigation bar effect implemented by jQuery

小云云
小云云Original
2018-01-09 10:26:092458browse

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>

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>

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
  });
});

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!

JavaScript firefox jquery chrome safari html class position
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery implements the function of automatically popping up the mask layer when opening a web page or sharing the function of popping up the mask layer by clicking on itNext article：jQuery implements the function of automatically popping up the mask layer when opening a web page or sharing the function of popping up the mask layer by clicking on it

Related articles

See more