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

Question

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

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

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

13 83

css jquery positioning

13 ответов:

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

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>

126

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

18

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

вы можете исправить это, если вы поставите " margin-top "вместо"top". На самом деле не знаю, почему он работает с margin tho.
$(window).scroll(function(){
    $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});
http://jsbin.com/idacel

6

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

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

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

3

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

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

2

мое решение

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

2

возможного ТОЛЬКО CSS решение может быть достигнуто с position: sticky;

поддержка браузера на самом деле очень хорошо: https://caniuse.com/#search=position%3A%20sticky

вот пример: https://jsfiddle.net/0vcoa43L/7/

2

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

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

получить положение (x & y) элемента, где вы хотите остановить прокрутку используя $('myElement').getPosition().x

$('myElement').getPosition().г

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

новый Fx.Scroll ('scrollDivId', {offset: {x: 24, y: 432} }).toTop();

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

новый Fx.Свиток(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);

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));
    }
Так что теперь фиксированный элемент остановится прямо перед Нижним колонтитулом. и не будет перекрываться с ним.

0

mVChr · Accepted Answer · 2013-08-20 14:24:18

вот быстрый плагин 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);
посмотреть рабочий пример →