如何让网站导航在滚动时悬浮固定位置

div触顶固定悬浮在浏览器顶部就是某个版块，当浏览器拉动到这个DIV的位置时就会自动悬浮固定在浏览器顶部。如下图：

下面学做网站论坛就来介绍一下如何实现div触顶固定悬浮在浏览器顶部效果。

方法/步骤

1. 在代码顶部</head>标签上方引入JQUERY；引入方法见：网页如何引入JQuery
2. 在需要触顶固定悬浮在浏览器顶部的DIV代码中添加一个ID代码

   
   id="pordAttr"
   
   

3. 在代码底部</body>标签上面添加以下的JS代码，实现DIV触顶固定悬浮在浏览器顶部。

   
   <script type="text/javascript"> 
   
   $(function () { 
   
   var elm = $('#pordAttr'); 
   
   var startPos = $(elm).offset().top; 
   
   $.event.add(window, "scroll", function () { 
   
   var p = $(window).scrollTop(); 
   
   $(elm).css('position', ((p) > startPos) ? 'fixed' : 'static'); 
   
   $(elm).css('top', ((p) > startPos) ? '0px' : ''); 
   
   }); 
   
   }); 
   
   </script>
   
   

方法二：

HTML代码：

<header class="main-header">

包含LOGO和菜单

</header>

JS代码：

window.addEventListener('scroll', () => {

const header = document.querySelector('.main-header');

if (window.scrollY > 100) {

header.style.position = 'fixed';

header.classList.add("fudong");

header.style.background = 'rgba(255, 255, 255, 0.98)';

header.style.boxShadow = '0 4px 20px rgba(0,0,0,0.15)';

// Change logo and nav colors

header.querySelectorAll('.logo, .nav-menu a').forEach(el => {

el.style.color = '#2c3e50';

});

header.querySelectorAll('.icon-btn').forEach(btn => {

btn.style.color = '#2c3e50';

});

} else {

header.style.position = 'absolute';

header.classList.remove("fudong");

header.style.background = 'rgba(255, 255, 255, 0.15)';

header.style.boxShadow = 'none';

// Reset colors

header.querySelectorAll('.logo, .nav-menu a').forEach(el => {

el.style.color = '#ffffff';

});

header.querySelectorAll('.icon-btn').forEach(btn => {

btn.style.color = '#ffffff';

});

}

});

另外一种方法：

1. 在代码顶部</head>标签上方引入JQUERY；
2. 在style.css中添加以下的样式代码：

   
   div.sticky {
   
   position: fixed;
   
   width: 100%;
   
   background-color: #fff;
   
   z-index: 99;
   
   box-shadow: 0 1px 3px rgba(0, 0, 0, .11);
   
   top: 0;
   
   }
   
   

3. 在代码底部</body>标签上面添加以下的JS代码，实现DIV触顶固定悬浮在浏览器顶部。btm-header为导航的class名。

   
   <script type="text/javascript"> 
   
   $(window).scroll(function(){
   
   var scroH = $(this).scrollTop();
   
   if(scroH>=50){
   
   $(".btm-header").addClass('sticky');
   
   }else if(scroH<50){
   
   $(".btm-header").removeClass('sticky');
   
   }
   
   })
   
   </script>