gpt4 book ai didi

javascript - 滚动时如何使导航栏保持不变

转载 作者:行者123 更新时间:2023-11-28 15:45:00 26 4
gpt4 key购买 nike

<分区>

我在浏览器窗口底部放置了一个导航栏,位于所有 div 元素的上方和外侧。当用户滚动并到达顶部时,我试图让导航栏停留在窗口顶部..

我已尝试执行以下操作,但似乎无法正常工作;还在线尝试了其他一些解决方案,但没有成功。有没有人有任何想法?

      
$(document).ready(function() {
// Cache selectors for faster performance.
var $window = $(window),
$mainNavBar = $('#navBar'),
$mainNavBarAnchor = $('#navBarAnchor');

// Run this on scroll events.
$window.scroll(function() {
var window_top = $window.scrollTop();
var div_top = $mainNavBarAnchor.offset().top;
if (window_top > div_top) {
// Make the div sticky.
$mainNavBar.addClass('stick');
$mainNavBarAnchor.height($mainNavBar.height());
}
else {
// Unstick the div.
$mainNavBar.removeClass('stick');
$mainNavBarAnchor.height(0);
}
});
});
    nav { height: 75px; width: 100%; position: absolute; bottom: 0; margin 0; padding 0; float: none; background-color: none; border: 0px solid #000; z-index: 100; color: #fff;}

ol { margin: auto; width: auto; height: auto; text-align: center; background-color: none; margin-top: 20px;}
ol li { display: inline-block; font-family: 'dinregular'; font-size: 1.6em; width: auto; margin: auto; background-color: none; color: #fff }
ol li:nth-child(1) { margin-right: 25px; margin-left: 0; }
ol li:nth-child(2) { margin-right: 25px; margin-left: 0;}
ol li:nth-child(3) { margin-right: 25px; margin-left: 0; }

.stick {
position: fixed;
top: 0;
background-color: white;
}
    <script src="https://code.jquery.com/jquery-1.11.0.js"></script>


<div id="navBarAnchor"></div>
<nav id="navbar">
<ol>
<a href="#About"><li>About</li> </a>
<a href="#Services"><li>Services</li> </a>
<a href="#Work"><li>Work</li> </a>
<a href="#Contact"><li>Contact</li> </a>
</ol>
</nav>

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com