使用Jquery方法将div的CSS位置从绝对更改为固定位置
使用Jquery方法将div的CSS位置从绝对更改为固定位置
提问于 2017-04-14 10:17:26
我正在建设一个网站，在那里我有一个名为“菜单栏”的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');
}
});
});回答 1
Stack Overflow用户
回答已采纳
发布于 2017-04-14 10:23:18
您的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) );页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43409584
复制相关文章
相似问题
腾讯云开发者
