Question

我遇到一个让我发疯的问题。我想解释一下...... 我有一个很长的滚动页面，大约有10个div，一个在另一个之下（之间没有空格）。在查看端口的底部是一个带有id和位置的按钮：固定。当我向上或向下滚动时，按钮被固定，而div则向上或向下移动。我想在按钮上有不同的id，具体取决于查看端口中的div层。这意味着如果一个divlayer填充超过50％的可用空间，按钮的href应该改变... 我尝试了inview.js，但问题是，2个div同时有inview类......

我目前的代码：

$('#div4, #div5, #div6').bind('inview', function (event, visible) {
        if (visible == true) {
        $(this).addClass("inview");

        } else {

        $(this).removeClass("inview");
        }
    });





var $div4 = $('#div4');

if($div4.hasClass("inview")){
    $('#button1').attr('id', 'button2'); 
  }

你看，视口中的每个div都有一个新的id。你有没有人有解决方案？谢谢特德

Answer 1

您可以在添加之前尝试删除inview类。这样的事情：

var $divs = $('#div4,#div5,#div6';
$divs.bind('inview', function (event, visible) {
        $divs.not(this).removeClass("inview");
        if (visible == true) {
          $(this).addClass("inview"); 
        }
     });

另一个建议是使用Waypoints插件并在div超过50％标记时触发。

唯一困难的部分是根据你需要的方向来选择当前的div或上面的那个。

插件：http://imakewebthings.com/jquery-waypoints/

演示：http://jsfiddle.net/lucuma/nFfSn/1/

代码：

 $('.container div').waypoint(function (direction) {
        if (direction=='up')
            alert('hit ' + $.waypoints('above')[$.waypoints('above').length-2].id);
        else
            alert('hit ' + $(this).attr('id'));  
    }, {
        offset: $.waypoints('viewportHeight') / 2

});

根据当前查看的div更改按钮的ID

1 个答案: