Dừng cuộn vị trí cố định tại một điểm nhất định?

Tuy nhiên, tôi có một phần tử là vị trí: cố định và vì vậy sẽ cuộn trang theo cách tôi muốn. Khi người dùng cuộn lên, tôi muốn phần tử dừng cuộn tại một điểm nhất định, giả sử khi nó cách đầu trang 250px, điều này có khả thi không? Mọi sự giúp đỡ hoặc lời khuyên sẽ hữu ích, cảm ơn!

Tôi có cảm giác rằng tôi sẽ cần phải sử dụng jquery để làm như vậy. Tôi đã thử lấy cuộn hoặc vị trí của người dùng nhưng thực sự bối rối, có giải pháp jquery nào không?

Đây là một plugin jQuery nhanh mà tôi vừa viết có thể làm những gì bạn yêu cầu:

$.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);

Xem ví dụ làm việc →

Bạn có nghĩa là đại loại như thế này?

http://jsfiddle.net/b43hj/

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="theFixed" style="position:fixed;top:100px;background-color:red">SOMETHING</div>

<!-- random filler to allow for scrolling -->
STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>

Đây là một plugin jquery hoàn chỉnh giải quyết vấn đề này:

https://github.com/bigspotteddog/ScrollToFixed

Mô tả của plugin này như sau:

Plugin này được sử dụng để cố định các phần tử lên đầu trang, nếu phần tử đã cuộn ra khỏi chế độ xem, theo chiều dọc; tuy nhiên, nó cho phép phần tử tiếp tục di chuyển sang trái hoặc phải với cuộn ngang.

Cho một tùy chọn marginTop, phần tử sẽ ngừng di chuyển theo chiều dọc lên trên khi cuộn dọc đã đến vị trí mục tiêu; nhưng, phần tử sẽ vẫn di chuyển theo chiều ngang khi trang được cuộn sang trái hoặc phải. Khi trang đã được cuộn xuống qua vị trí mục tiêu, phần tử sẽ được khôi phục về vị trí ban đầu trên trang.

Plugin này đã được thử nghiệm trên Firefox 3/4, Google Chrome 10/11, Safari 5 và Internet Explorer 8/9.

Cách sử dụng cho trường hợp cụ thể của bạn:

<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 });
});

Bạn có thể làm những gì James Montagne đã làm với mã của anh ấy trong câu trả lời của anh ấy, nhưng điều đó sẽ khiến nó nhấp nháy trong Chrome (được thử nghiệm trong V19).

Bạn có thể khắc phục điều đó nếu bạn đặt "margin-top" thay vì "top". Không thực sự biết tại sao nó hoạt động với margin tho.

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

http://jsbin.com/idacel

Có thể đạt được giải pháp CHỈ CSS khả thi vớiposition: sticky;

Hỗ trợ trình duyệt thực sự rất tốt: https://caniuse.com/#search=position%3A%20sticky

đây là một ví dụ: https://jsfiddle.net/0vcoa43L/7/

giải pháp của tôi

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

Trong một dự án, tôi thực sự có một số tiêu đề cố định ở cuối màn hình khi tải trang (đó là một ứng dụng vẽ nên tiêu đề ở dưới cùng để cung cấp không gian tối đa cho phần tử canvas trên khung nhìn rộng).

Tôi cần tiêu đề trở thành 'tuyệt đối' khi nó đến chân trang khi cuộn, vì tôi không muốn tiêu đề trên chân trang (màu tiêu đề giống với màu nền của chân trang).

Tôi đã lấy câu trả lời cũ nhất ở đây (được chỉnh sửa bởi Gearge Millo) và đoạn mã đó hoạt động cho trường hợp sử dụng của tôi. Với một số trò chơi xung quanh, tôi đã làm việc này. Bây giờ tiêu đề cố định nằm đẹp mắt phía trên chân trang khi nó đến chân trang.

Tôi chỉ nghĩ rằng tôi sẽ chia sẻ trường hợp sử dụng của mình và cách nó hoạt động, và nói lời cảm ơn! Ứng dụng: 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);
    }

Tôi đã viết một bài đăng trên blog về điều này có chức năng này:

$.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();
  });
};

Giải pháp sử dụng Mootools Framework.

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

1. Lấy Vị trí (x & y) của phần tử mà bạn muốn dừng cuộn bằng cách sử dụng $ ('myElement'). GetPosition (). X

   $ ('myElement'). getPosition (). y

2. Đối với loại hoạt ảnh sử dụng cuộn:

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

3. Để chỉ cần đặt cuộn ngay lập tức, hãy sử dụng:

   new Fx.Scroll (myElement) .set (x, y);

Hi vọng điêu nay co ich !! : D

Tôi thích giải pháp này

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

vấn đề của tôi là tôi phải xử lý vùng chứa vị trí tương đối trong Adobe Muse.

Giải pháp của tôi:

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

Chỉ mã mVChr ngẫu hứng

$(".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);

Tôi đã điều chỉnh câu trả lời của @ mVchr và đảo ngược nó để sử dụng cho định vị quảng cáo cố định: nếu bạn cần nó được định vị hoàn toàn (cuộn) cho đến khi rác tiêu đề tắt màn hình nhưng sau đó cần nó ở trạng thái mơ hồ / hiển thị trên màn hình sau đó:

$.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;
}

Tôi thích câu trả lời @james nhưng tôi đang tìm kiếm nghịch đảo của nó, tức là dừng vị trí cố định ngay trước chân trang, đây là những gì tôi nghĩ ra

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));
    }

Vì vậy, bây giờ phần tử cố định sẽ dừng ngay trước chân trang. và sẽ không trùng lặp với nó.