0

我有一个让我发疯的问题。我试图解释...我有一个很长的滚动页面，大约有 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。你们有人有解决办法吗？谢谢泰德

4

1 回答 1

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 或上述 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

});
于 2013-02-07T01:33:41.960 回答