Question

所以我试图创建一个粘性div，它可以向上滚动页面或向下滚动页面（onClick），具体取决于它在页面上的位置。

我一直在调整代码一段时间，无法获得神奇的公式。

我使用的是来自http://imakewebthings.com/jquery-waypoints/#get-started和http://archive.plugins.jquery.com/project/ScrollTo

的插件

代码在这里。

<head>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <script src="http://s199881165.onlinehome.us/transfem/scripts/jquery.cookie.js"></script>
  <script src="http://s199881165.onlinehome.us/transfem/scripts/jquery.scrollTo-1.4.3.1-min.js"></script>
  <script src="http://s199881165.onlinehome.us/transfem/newlayout/script/waypoints.min.js"></script>
    <script src="http://s199881165.onlinehome.us/transfem/newlayout/script/waypoints-sticky.min.js"></script>
</head>

...

<script>


$(function() {                     // When the page has loaded,
  $('.tabbycat').waypoint(               // create a waypoint
    function() {

        $('#tabtabtab').removeClass('tabbycat', 1, 'linear');
        $('#tabtabtab').addClass('stuck', 1, 'linear');


    }
  )
});

$(function() {                     // When the page has loaded,
  $('.top').waypoint(               // create a waypoint
    function() {

        $('#tabtabtab').removeClass('stuck', 1, 'linear');
        $('#tabtabtab').addClass('tabbycat', 1, 'linear');

    }
  )
});

var itsthis = document.getElementsByClassName('tabbycat');
var thistoo = document.getElementsByClassName('stuck');

$(itsthis).onClick(function(){
$(window).scrollTo( {top:'1px', left:'1px'}, 300 );
});


$(thistoo).onClick(function(){
$(window).scrollTo( {top:'339px', left:'1px'}, 300 );
});


</script>

Tally Ho！

Answer 1

使用以下插件

http://dropthebit.com/demos/stickyfloat/stickyfloat.js

同时检查演示

http://dropthebit.com/demos/stickyfloat/stickyfloat.html

Answer 2

我已经尝试过一个Chetan说过，我不得不说，每次滚动时Stickyfloat都会刷新，所以我们可以看到延迟毫秒（当应用脚本为背景时非常烦人），所以我喜欢这个这使得图层的CSS属性一旦达到图层所在的位置高度就会变为固定，所以一旦你向下滚动就没有刷新。

http://stickyjs.com/

唯一的缺点是，一旦到达父底部（如果需要），就无法停止效果。也许一个调整会成功。

试图用jquery waypoint获得一个粘性元素

2 个答案: