在某个位置停止固定位置滚动?


94

我有一个position:fixed的元素,所以随页面滚动,但是我想要它如何。当用户向上滚动时,我希望元素在某个点处停止滚动,比如说距页面顶部250px,这可能吗?任何帮助或建议将对您有所帮助,谢谢!

我有一种感觉,我需要使用jquery来做到这一点。我尝试获取用户所在位置的滚动或位置,但感到非常困惑,是否有任何jQuery解决方案?


1
据我所知,只有基于javascript的解决方案才能满足您的需求。没有纯CSS解决方案可以做到这一点。
cdeszaq 2011年

Answers:


124

这是我刚刚写的一个快速jQuery插件,可以满足您的要求:

$.fn.followTo = function (pos) {
    var $this = this,
        $window = $(window);

    $window.scroll(function (e) {
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 0
            });
        }
    });
};

$('#yourDiv').followTo(250);

请参阅工作示例→


这看起来很有希望,是的,我想过要在某些点上更改定位,请让我知道我的感谢!
路易丝·麦考米斯基

1
嗨,是的,谢谢您,花了几个星期的时间,正是我想要的,现在它工作正常,再次感谢。
路易丝·麦考米斯基

3
$('window')不应该用引号引起来。但是,为此,它非常有帮助。
jeff 2012年

137

你的意思是这样吗?

http://jsfiddle.net/b43hj/

$(window).scroll(function(){
    $("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop()));
});


太好了,非常感谢!尽管我的任务是创建始终位于页脚上方的“到达顶部”按钮,但我还是对该代码进行了一些修改。在这里查看我的版本(js咖啡):jsfiddle.net/9vnwx3fa/2
Alb

@James Montagne-如果我想要固定元素粘底,反转该代码的解决方案是什么?滚动,然后停止250px才到达页面底部?
BoneStarr '16

1
@BoneStarr有点复杂。您需要将当前的scrollTop与页面和视口的高度进行比较。然后,您将简单地使用上面相同的代码,不同之处bottom在于最大值中的和计算出的值(偏移250)。
詹姆斯·蒙塔涅

@JamesMontagne-您有机会详细说明这个小提琴吗?非常感激,因为我坚持使用此工具。jsfiddle.net/Hf5wH/137
BoneStarr'2

1
@bonestarr比这复杂得多。您应该将其扩展为多行代码,否则很难理解。 jsfiddle.net/Hf5wH/139
詹姆斯·蒙塔涅

19

这是一个完整的jquery插件,可以解决此问题:

https://github.com/bigspotteddog/ScrollToFixed

该插件的说明如下:

如果该元素垂直滚动出视图,则该插件用于将元素固定在页面顶部。但是,它确实允许元素随着水平滚动继续向左或向右移动。

给定一个marginTop选项,一旦垂直滚动到达目标位置,该元素将停止垂直向上移动;否则,元素将停止垂直移动。但是,当页面向左或向右滚动时,元素仍将水平移动。页面向下滚动到目标位置后,该元素将恢复到页面上的原始位置。

此插件已在Firefox 3/4,Google Chrome 10/11,Safari 5和Internet Explorer 8/9中经过测试。

具体用法:

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed({ marginTop: 250 });
});

1
谢谢,是的,这看起来确实有用,我使用了先前的答案,因为该项目是几个月前的,但是我一定会在以后的项目中牢记这一点,它看起来更容易了,谢谢:)
Louise McComiskey 2011年

6

您可以在答案中使用James Montagne的代码进行操作,但这会使它在Chrome中闪烁(在V19中进行了测试)。

如果您放置“ margin-top”而不是“ top”,则可以解决此问题。真的不知道为什么它会与保证金一起工作。

$(window).scroll(function(){
    $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});

http://jsbin.com/idacel


这也适用于文本下方的固定元素,小屏幕显示一直存在严重问题,并且固定滚动元素在较小的区域(如1024x768)上运行到浏览器顶部。这解决了这个问题。
约书亚


2

我的解决方案

$(window).scroll(function(){
        if($(this).scrollTop()>425) {
            $("#theRelative").css("margin-top",$(this).scrollTop()-425);
            }   else {
                $("#theRelative").css("margin-top",$(this).scrollTop()-0);
                }
            });
            });

2

在一个项目中,我实际上在页面加载时将一些标题固定在屏幕的底部(这是一个绘图应用程序,因此标题位于底部,以便在宽视口中为画布元素提供最大的空间)。

当标题到达滚动页脚时,我需要标题变为“绝对”,因为我不希望标题超过页脚(标题颜色与页脚背景色相同)。

我在这里得到了最早的答复(由Gearge Millo编辑),并且该代码段适用于我的用例。经过一些玩耍,我开始工作了。现在,一旦到达页脚,固定标题就位于页脚上方。

只是以为我会分享用例及其工作原理,然后说谢谢!该应用程序:http : //joefalconer.com/web_projects/drawingapp/index.html

    /* CSS */
    @media screen and (min-width: 1100px) {
        #heading {
            height: 80px;
            width: 100%;
            position: absolute;  /* heading is 'absolute' on page load. DOESN'T WORK if I have this on 'fixed' */
            bottom: 0;
        }
    }

    // jQuery
    // Stop the fixed heading from scrolling over the footer
    $.fn.followTo = function (pos) {
      var $this = this,
      $window = $(window);

      $window.scroll(function (e) {
        if ($window.scrollTop() > pos) {
          $this.css( { position: 'absolute', bottom: '-180px' } );
        } else {
          $this.css( { position: 'fixed', bottom: '0' } );
        }
      });
    };
    // This behaviour is only needed for wide view ports
    if ( $('#heading').css("position") === "absolute" ) {
      $('#heading').followTo(180);
    }

1

我写了一篇有关此功能的博客文章

$.fn.myFixture = function (settings) {
  return this.each(function () {

    // default css declaration 
    var elem = $(this).css('position', 'fixed');

    var setPosition = function () {         
      var top = 0;
      // get no of pixels hidden above the the window     
      var scrollTop = $(window).scrollTop();    
      // get elements distance from top of window
      var topBuffer = ((settings.topBoundary || 0) - scrollTop);
      // update position if required
      if (topBuffer >= 0) { top += topBuffer }
      elem.css('top', top);      
    };

    $(window).bind('scroll', setPosition);
    setPosition();
  });
};

0

使用Mootools框架的解决方案。

http://mootools.net/docs/more/Fx/Fx.Scroll

  1. 使用$('myElement')。getPosition()。x获取要停止滚动的元素的Position(x&y)

    $('myElement')。getPosition()。y

  2. 对于动画的滚动使用:

    新的Fx.Scroll('scrollDivId',{offset:{x:24,y:432}})。toTop();

  3. 要立即设置滚动,请使用:

    新的Fx.Scroll(myElement).set(x,y);

希望这可以帮助 !!:D


0

我喜欢这个解决方案

$(window).scroll(function(){
    $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});

我的问题是我不得不处理Adobe Muse中的位置相关容器。

我的解决方案:

$(window).scroll(function(){
    if($(this).scrollTop()>425) {
         $("#theRelative").css("margin-top",$(this).scrollTop()-425);
    }
});

0

只是即兴的mVChr代码

$(".sidebar").css('position', 'fixed')

    var windw = this;

    $.fn.followTo = function(pos) {
        var $this = this,
                $window = $(windw);

        $window.scroll(function(e) {
            if ($window.scrollTop() > pos) {
                topPos = pos + $($this).height();
                $this.css({
                    position: 'absolute',
                    top: topPos
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 250 //set your value
                });
            }
        });
    };

    var height = $("body").height() - $("#footer").height() ;
    $('.sidebar').followTo(height);
    $('.sidebar').scrollTo($('html').offset().top);

存储$(this)和存储$(window)在变量中的原因是,您只需要这样做$this.height()等等。如果插件存储原始的顶部值并在设置固定宽度时将其还原为顶部位置,而不是设置顶部位置会更好吗?另外,您是什么意思Just improvised mVChr code
Cyclonecode

0

我调整了@mVchr的答案并将其反转以用于粘性广告定位:如果您需要对其进行绝对定位(滚动),直到标题垃圾不在屏幕上,但之后需要使其固定/在屏幕上可见:

$.fn.followTo = function (pos) {
    var stickyAd = $(this),
    theWindow = $(window);
    $(window).scroll(function (e) {
      if ($(window).scrollTop() > pos) {
        stickyAd.css({'position': 'fixed','top': '0'});
      } else {
        stickyAd.css({'position': 'absolute','top': pos});
      }
    });
  };
  $('#sticky-ad').followTo(740);

CSS:

#sticky-ad {
    float: left;
    display: block;
    position: absolute;
    top: 740px;
    left: -664px;
    margin-left: 50%;
    z-index: 9999;
}

0

我喜欢@james的答案,但我一直在寻找它的反函数,即在页脚之前停止固定位置,这是我想出的

var $fixed_element = $(".some_element")
if($fixed_element.length){
        var $offset = $(".footer").position().top,
            $wh = $(window).innerHeight(),
            $diff = $offset - $wh,
            $scrolled = $(window).scrollTop();
        $fixed_element.css("bottom", Math.max(0, $scrolled-$diff));
    }

因此,现在固定元素将在页脚之前停止。并且不会与之重叠。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.