Question

我在网页上有3个部分，根据相应的按钮点击显示和隐藏。点击后，当前可见区域淡出，区域调整大小以适应新内容的高度，然后新区域淡入，然后窗口为scrollTop设置动画，使按钮位于屏幕顶部。最重要的是，有一个大图像滑块，菜单和徽标。

这种方法很好，但看起来很酷。

但是，显然如果新高度比前一个高度短，则当使用鼠标滚轮时，scrollTop值无法更新（仅限几个循环）。可见的结果是页面向下移动一点，跳回到之前的位置几个循环。

因此，例如，如果我将scrollTop位置转储到控制台并滚动滚轮，它将显示： 535 535 535 535 535 556 593 619 ...

过去我可能只是使用了fadeIn和fadeOut。这会自动调整部分的大小。但是在淡入淡出之后添加了scrollTop动画，这似乎会导致动画出现问题（fadeIn / Out使用display：none所以我猜）结果是动画在页面上的位置错误。

非常感谢任何帮助

/**
 * toggle
 *
 * there are three sections sitting on top of each other
 * when a button is clicked the sections
 * a - fade out
 * b - resize ( the footer will move up and down to fit)
 * c - fade in
 * d - the page will scroll to this section which is directly under the header slider
 *
 * d is the reason I am using opacity and resizing instead of a simple fadeOut because display:none
 * has no height information and makes the scroll animation wonky
 * 
 * @returns {Void}
 * */
var toggle = function(e) {
    e.preventDefault();

    // reset section
    $('.sections a').removeClass('show');

    // get the target top position for the animation
    var top = $('.logo-container').position().top;

    // get the class name of the click
    var t = $(this).attr("class");

    // dealing with other classes (unrelated)
    if ($(this).hasClass('in')) {
      t = t.replace('in i-','');
      $('.sections .'+t).addClass('show');
    }else{
      $(this).addClass('show'); 
    }

    // push all sections to the same z-index
    $('.container section').css('z-index',1);

    // fade out sections and update
    $('.container section.show').fadeTo("fast",0,function() {

        $(this).removeClass("show");

        $('.container .'+t).addClass("show");

        // sections is assigned at load time with each sections height
        var h = sections[t]+150; // +150 just gives us a little breathing room

        $('.container, .container section').animate({'height': h},100,function(){
          // set this sections z-index above the rest
          $('.container .'+t).css('z-index',2);
          // fade in the relevant section
          $('.container .'+t).fadeTo("fast",1,function() {
            // scroll the mouse postion to the content
            $("html, body").animate({ 
              scrollTop: top+'px' 
            }, 500,function() {
              // assign the scrolltop position for an unrelated bit of code
              opt = $(document).scrollTop();

            });
          });
        });
    });
}

/**
* bindActions
* bind events to dom nodes
* @returns {Void}
* */ 
var bindActions = function() {
    if (!loggedin) {
        $('.sections a, section a.in').on('click', toggle);
    }
};

鼠标滚轮在高度调整大小后不会更新

0 个答案: