或者有人可以告诉我另一种方法(不使用插件)
我左侧有一个侧面导航,右侧有一些内容。两个元素都向左浮动。
我希望侧面导航能够“坚持”#39;当它从窗口顶部到达125px时,一旦向下滚动页面。
我觉得我很亲近,但我还没有到那儿!根据我编写的代码,side-nav'跳转'一旦我们滚动到正确的窗口位置,然后它回到我希望它“坚持”的位置,直到窗口的顶部。
另一个问题是,一旦应用了.stick类,元素就会从文档流中取出(因为我应用了一个位置:fixed;)并且.content向左移动到把它当作。
这是一个codepen:http://codepen.io/MandyMadeThis/pen/DLtsJ
**注意:我似乎无法重新创建侧面导航'跳跃'滚动到窗口的顶部,所以我不知道这些是什么,但我仍然想知道正确的方法,没有内容移动到左边。 **
如果有人能指引我朝着正确的方向前进,那将是美好的。谢谢。
这是我的降价:
<body>
<nav>navigation content</nav>
<header>header content</header>
<div class="container clearfix">
<div class="side-nav">THIS IS THE THING I WANT TO STICK</div>
<div class="content">This needs to stay to the right of the .side-nav</div>
</body>
这是CSS:
.side-nav {
float: left;
position: relative;
top: -17px;
width: 23%;
margin-right: 2%;
}
.content {
width: 70%;
float: left;
}
.stick {
position:fixed;
top:0px;
margin-top: 125px;
}
这是我的jQuery:
var sn = $(".side-nav");
var pos = sn.position();
$(window).scroll(function() {
var windowPos = $(window).scrollTop();
if (windowPos >= pos.top - 125) {
sn.addClass("stick");
} else {
sn.removeClass("stick");
}
});
答案 0 :(得分:0)
要解决此问题,您只需向margin-left
添加.content
并删除float
即可。这样,内容的位置就不依赖于那里的导航。
.content {
width: 70%;
margin-left: 25%;
}