0

所以我正在尝试创建一个粘性 div,它可以向上滚动页面或向下滚动页面(onClick),具体取决于它在页面上的位置。

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

我使用的插件来自:http: //imakewebthings.com/jquery-waypoints/#get-startedhttp://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>

发现目标!

4

2 回答 2

0

我已经尝试过 Chetan 所说的,我不得不说,每次滚动时,Stickyfloat 都会刷新,所以我们可以看到延迟毫秒(将脚本应用于背景时非常烦人),所以我更喜欢这个使图层的 CSS 属性一旦达到图层所在的位置高度即为 Fixed,因此一旦您继续向下滚动,就没有刷新。

http://stickyjs.com/

唯一的缺点是,一旦到达父级底部(如果需要),您将无法停止效果。也许调整一下就可以了。

于 2013-09-06T19:32:55.867 回答
0

使用下面的插件

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

也检查演示

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

于 2013-05-03T05:05:34.987 回答