切换位置固定和静态

我有2列。右栏是一个正常的可滚动内容窗格。类名为sticky的左列是我试图在固定和静态定位之间切换的列。当您滚动右栏直到结束时，它必须保持固定。当您到达右栏的末尾（并且下一个部分变得可见）时，div的位置必须变为静态，并且通过页面正常滚动。以下部分必须以相同的方式（通常）滚动，直到它到达浏览器窗口的顶部，当前视图中的sticky div变为固定位置。切换位置固定和静态

HTML：

<section> 
    <div class="c-2 sticky"></div> /* Background image */ 
    <div class="c-2"> 
     <p>Any volume of content. Must cater for long and short pieces</p> 
     .... 
    </div> 
</section>

CSS：

.content { 
    width: 100%; 
    overflow: hidden; 
    float: left; 
    padding-left: 130px; 
    position: relative; 
} 

.c-2 { 
    position: relative; 
    width: 50%; 
    left: 50%; 
    overflow: hidden; 
    background: #e4f; 
} 

    .c-2.sticky { 
     background: url(img/holder.jpg) fixed top center no-repeat #fff; 
     -webkit-background-size: cover; 
      -moz-background-size: cover; 
      -o-background-size: cover; 
       background-size: cover; 
     position: fixed; 
     left: 0; 
     width: 60%; 
    }

的JS就是我倒下，我只是不知道如何开始这样做。我试过使用StickyKit但没有任何运气。我在这里有一个JSFiddle：http://jsfiddle.net/6HPX5/

来源

2013-10-28 egr103

推广更好的解释像这个问题在stackoverflow上皱起了眉头。但是，我确实提供了一些想法，以帮助您开始或至少了解如何实现目标...... \ – user1470118

您好，请查看本演示，并告诉我，如果这样的事情是你想要什么http://jsfiddle.net/6HPX5/130/然后我可以对这个.

来源

2013-10-28 19:58:23 DaniP

是的，这是辉煌的，正是我期待的。我似乎无法将其整合到我的网站中，尽管如此解释会非常有帮助。谢谢！ – egr103

更多信息上面：左侧栏不会粘住，页面正常滚动。开发工具不会带来任何错误，也不会显示正在添加/删除的abs或修复类。请参阅工作代码：http://176.32.230.2/baodev.com/cjo/有什么想法？ – egr103

试着在函数中添加一个console.log（'msj'）或者跟踪任何一个var到window.scroll函数中，我们现在可以在这个问题的位置 – DaniP

您需要在新节的开始位置放置一个“锚点”，然后使用jQuery，您需要查看该元素的位置，然后一旦确定锚是可见的使用jQuery（id）.css（）选项来改变位置。

或者另一种方法是跟踪滚动，当左边的元素需要移动时，使用动画将其移出屏幕。

UPDATE

http://api.jquery.com/css/ - 改变位置属性。

http://api.jquery.com/scroll/ - 检测滚动

http://api.jquery.com/position/或http://api.jquery.com/offset/ - 让你的锚的位置。

然后你补充一点：

jQuery(window).scroll(function(e) { 
    //track scrolling 
});

来源

2013-10-28 16:15:59 user1470118

我明白您的观点，但是您能否提供指向您参考的资源的任何链接？ – egr103

我更新了回复。你可以使用这些工具来做你想做的事。 – user1470118

切换位置固定和静态

回答

相关问题