1

我目前有一个<div>在页面向上或向下移动时保持其在页面左侧顶部的位置。这工作正常，但不是很顺利。

我正在寻找重新考虑下面的代码以使其平滑滚动。目前，当触发器发生时，它只是设置 CSStop属性——这使得它“抖动”。我有点不确定如何使它成为一个平滑的滚动动作，而不是将 css 顶部值设置为其确切位置

        //scrolling menu
    if($("#selectedOptions").length > 0){   //if the element exists
        $(window).scroll(function(){
            var div = $("#selectedOptions");        // the div that slides
            if(div) {                               
                var pos = div.parent().position().top;  //position of the top of the wrapper
                var windowPos = $(window).scrollTop();  //current window postion

                //top of moving div not to go further than
                var bottom = $("#sizeAndQuantHeader").position().top; //where the div shouldn't go past 

                //de-bug
                //console.log("pos: " + pos + " - winpos" + windowPos + ", heih: " + divHieght + " doc he: " + $(document).height() + " bott" + bottom);

                //if between the range then display at new postion
                if (windowPos > pos && (windowPos < bottom)) {
                    div.css("top", windowPos-pos);
                    //must be higher than its current position so set to 0
                 } else if (windowPos < pos && windowPos < bottom) {
                     div.css("top", 0);
                } 
            }
        });
    }

任何有关如何使<div>页面平滑滚动的帮助或提示将不胜感激。

**更新

不幸的是，我的元素已经在不同的页面区域滚动：

var _scrollTo = function(div){
    $('html,body').animate({
        scrollTop: div.offset().top},
        'slow');
};

现在，当调用上面的函数时，我认为它会触发调用：

  $(window).scroll(function(){animate div...

并延迟新动画 div 的滚动。我也不能使用回调，因为它在其他地方被重复使用。我可能在这里遗漏了一些东西，所以我求助于没有动画。

4

3 回答 3

3

使用 Animate 使其平滑。

div.animate({ top: windowPos-pos }, 300);
于 2013-01-17T13:21:00.440 回答
1

关键是在这里更改此代码：

if (windowPos > pos && (windowPos < bottom)) {
    div.css("top", windowPos-pos);
    //must be higher than its current position so set to 0
} else if (windowPos < pos && windowPos < bottom) {
    div.css("top", 0);
}

到

if (windowPos > pos && (windowPos < bottom)) {
    div.animate({top: windowPos-pos}, 100);
    //must be higher than its current position so set to 0
} else if (windowPos < pos && windowPos < bottom) {
    div.animate({top: "0"}, 100);
}

jQueryanimate()真的很容易使用/操作。

于 2013-01-17T13:22:36.353 回答
0

将 CSS 添加到 div (#selectedOptions)

transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;

它会自动顺利进行。

于 2017-07-07T08:37:22.187 回答