Остановка прокрутки фиксированной позиции в определенный момент?

У меня есть элемент, который является позицией: фиксированный, и поэтому прокручивает страницу, как я ее хочу. когда пользователь прокручивается, я хочу, чтобы элемент остановил прокрутку в определенную точку, скажем, когда он равен 250 пикселей от верхней части страницы, возможно ли это? Любая помощь или совет будут полезны!

У меня было ощущение, что мне нужно будет использовать jquery для этого. Я пытался получить прокрутку или местоположение того, где пользователь, но действительно запутался, есть ли какие-либо jquery-решения?

ОТВЕТЫ

Ответ 1

Вот быстрый плагин 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);

See working example →

Ответ 2

Вы имеете в виду вроде этого?

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>

Ответ 3

Вот полный плагин 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 });
});

Ответ 4

Вы можете сделать то, что сделал Джеймс Монтань со своим кодом в своем ответе, но это заставит его мерцать в Chrome (проверено на V19).

Вы можете исправить это, если вместо "top" поставить "margin-top". Не знаю, почему это работает с margin tho.

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

http://jsbin.com/idacel

Ответ 5

В проекте у меня на самом деле есть некоторый заголовок, прикрепленный к нижней части экрана при загрузке страницы (это приложение для рисования, так что заголовок находится внизу, чтобы предоставить максимальное пространство для элемента холста на широкоэкранном экране).

Мне нужно, чтобы заголовок стал "абсолютным", когда он достиг нижнего колонтитула в прокрутке, так как я не хочу, чтобы заголовок над нижним колонтитулом (цвет курса был таким же, как и цвет фона нижнего колонтитула).

Я взял самый старый ответ здесь (отредактирован 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);
    }

Ответ 6

Я написал сообщение в блоге об этом, в котором была указана эта функция:

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

Ответ 7

мое решение

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

Ответ 8

Решение с использованием Mootools Framework.

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

  • Получить позицию (x и y) элемента, в котором вы хотите остановить прокрутку используя $('myElement'). getPosition(). x

    $( 'MyElement'). GetPosition(). У

  • Для анимации типа прокрутки используйте:

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

  • Чтобы просто установить прокрутку, немедленно используйте:

    новый Fx.Scroll(myElement).set(x, y);

Надеюсь, что это поможет!: D

Ответ 9

Мне понравилось это решение

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

Ответ 10

Просто импровизированный код 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);

Ответ 11

Я адаптировал @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;
}

Ответ 12

Мне понравился ответ @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));
    }

Итак, теперь фиксированный элемент остановится прямо перед нижним колонтитулом. и не будет перекрываться с ним.