jQuery:你可以在没有使用css位置的情况下将一个元素粘贴在Scroll上吗:修复?

时间:2014-07-16 22:22:40

标签: javascript jquery sticky

或者有人可以告诉我另一种方法(不使用插件)

我左侧有一个侧面导航,右侧有一些内容。两个元素都向左浮动。

我希望侧面导航能够“坚持”#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");
    }
});

1 个答案:

答案 0 :(得分:0)

要解决此问题,您只需向margin-left添加.content并删除float即可。这样,内容的位置就不依赖于那里的导航。

.content {
   width: 70%;
   margin-left: 25%;
}

http://codepen.io/anon/pen/jbCix