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

96

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

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

jquery css positioning Луиза МакКомиски
источник
1
Насколько мне известно, только решение на основе javascript будет делать то, что вы хотите. Для этого не существует чистого CSS-решения.
cdeszaq

Ответы:

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')не должно быть в кавычках. Но спасибо за это, это очень помогло.
Джефф
138

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

http://jsfiddle.net/b43hj/

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

Показать фрагмент кода

Джеймс Монтань
источник
Отлично, спасибо вам большое! Хотя моей задачей было создать кнопку «Вверх», которая всегда была бы над нижним колонтитулом, я немного изменил этот код. Смотрите мою версию здесь (Js кофе): jsfiddle.net/9vnwx3fa/2
Alb
@ Джеймс Монтань - Что было бы решением для изменения этого кода, если бы я хотел, чтобы фиксированный элемент закреплялся внизу: 0; при прокрутке, а затем остановитесь на 250 пикселей, прежде чем он дойдет до конца страницы?
BoneStarr 03
1
@BoneStarr, это немного сложнее. Вам нужно будет сравнить текущий scrollTop с высотой страницы и области просмотра. Затем вы просто использовали бы тот же код выше, за исключением bottomи этого вычисленного значения (смещение на 250) в макс.
Джеймс Монтань
@JamesMontagne - Есть ли шанс, что вы могли бы подробнее рассказать об этой скрипке? Был бы очень признателен, так как я застрял с этим. jsfiddle.net/Hf5wH/137
BoneStarr 05
1
@bonestarr Намного сложнее, чем этот. Вы должны расширить его до нескольких строк кода, иначе это действительно сложно понять. jsfiddle.net/Hf5wH/139
Джеймс Монтань
20

Вот полный плагин 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
Спасибо, да, это выглядит действительно полезным, я использовал предыдущий ответ, так как этот проект был пару месяцев назад, однако я обязательно учту это для будущих проектов, это выглядит проще, спасибо :)
Луиза МакКомиски
6

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

Это можно исправить, если вместо «сверху» указать «margin-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);
                }
            });
            });
user3288218
источник
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 Framework.

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

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

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

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

    новый Fx.Scroll ('scrollDivId', {смещение: {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;
}
cbmtrx
источник
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));
    }

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

мшахбазм
источник