我正在建立一个网站,其中有一个名为“菜单栏”的 div 类。它只是一个在屏幕顶部下方延伸数百像素的条,带有一些背景颜色。我的 HTML、CSS 和 JQuery 位于 3 个单独的文件中。
当用户向下滚动页面并且“菜单栏”的顶部到达屏幕顶部时,我希望它停留在那里,直到用户一直滚动回其原始位置。现在,“菜单栏”被设置为绝对 CSS 位置。我想我可以使用 JQuery 方法 .removeClass() 和 .addClass() 将菜单栏的位置更改为“固定”。下面是我的代码。
相关 HTML:
<html>
<body>
<div id="page-container">
<div id="header">
<div class="menu-bar"></div>
</div>
</div>
</body>
</html>
相关CSS:
.menu-bar
{
position: absolute;
width: 100%;
height: 50px;
left: 0;
top: 225px;
background-color: #11342D;
z-index: -1;
}
.menu-fixed {
position: fixed;
width: 100%;
height: 50px;
left: 0;
top: 0;
background-color: #11342D;
z-index: -1;
}
Jquery:
$(document).ready(function(){
var offset = $('menu-bar').offset();
$(window).scroll(function){
var scroll = $(window).scrollTop();
if offset.top < scroll) $('menu-bar').removeClass('menu-bar').addClass('menu-fixed');
else $('menu-bar').removeClass('menu-fixed').addClass('menu-bar');
});
});
该代码无法正常工作,我已经排查好几天了。我究竟做错了什么?这是一个网站的链接,该网站几乎具有我正在寻找的行为:[https://monocle.com/][1]
谢谢。
更新:下面是任何需要复制此行为的人的工作 jQuery 代码。
$(document).ready(function(){
var offset = $('.menu-bar').offset();
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (offset.top < scroll)
{
$('.menu-bar').removeClass('menu-bar').addClass('menu-fixed');
}
else
{
$('.menu-fixed').removeClass('menu-fixed').addClass('menu-bar');
}
});
});
最佳答案
您的 if
条件语法不正确,而且 menu-bar
是一个类,因此请使用 .menu-bar
if (offset.top < scroll) //start ( bracket was missing
{
$('.menu-bar').removeClass('menu-bar').addClass('menu-fixed');
}
else
{
$('.menu-bar').removeClass('menu-fixed').addClass('menu-bar');
}
你也可以
$('.menu-bar').toggleClass('menu-fixed', (offset.top < scroll) );
$('.menu-fixed').toggleClass('menu-bar', !(offset.top < scroll) );
关于javascript - 使用 Jquery 方法将 div 的 CSS 位置从绝对位置更改为固定位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43409584/