Зупинення прокрутки фіксованого положення в певній точці?

94

У мене є елемент, який є 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);

Див. Робочий приклад →

— mVChr
джерело
Це виглядає багатообіцяючим, так це те, що я думав, змінивши позиціонування в певних точках, я дам вам знати, як я отримую подяку!
— Луїза МакКоміскі
1
Привіт, так, дякую вам за декілька тижнів саме до того, що я хотів, і зараз це чудово працює, ще раз спасибі.
— Луїза МакКоміскі,
3
$('window')не повинно бути в лапках. Але дякую за це, це було дуже корисно.
— jeff
137

Ви маєте на увазі щось подібне?

http://jsfiddle.net/b43hj/

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

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

— Джеймс Монтань
джерело
Чудово, велике спасибі! Хоча моїм завданням було створити кнопку "Нагорі", яка завжди знаходилася б над нижнім колонтитулом, я трохи змінив цей код. Дивіться мою версію тут (js кава): jsfiddle.net/9vnwx3fa/2
— Альб
@James Montagne - Яким було б рішення для зміни цього коду, якби я хотів, щоб фіксований елемент був липким внизу: 0; на прокрутці, а потім зупиніть 250 пікселів, перш ніж вона потрапить до кінця сторінки?
— BoneStarr
1
@BoneStarr це трохи складніше. Вам потрібно буде порівняти поточний scrollTop з висотою сторінки та вікном перегляду. Тоді ви просто скористаєтесь тим самим кодом, наведеним вище, за винятком bottomзначень і цього розрахункового значення (зміщеного на 250) у макс.
— Джеймс Монтань,
@JamesMontagne - Ви мали б шанс пояснити цю скрипку? Буду дуже вдячний, оскільки я застряг у цьому. jsfiddle.net/Hf5wH/137
— BoneStarr
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
Дякую, так, це виглядає дуже корисно, я використовував попередню відповідь, оскільки цей проект був пару місяців тому, проте я, безумовно, пам’ятатиму про це для майбутніх проектів, це виглядає простіше, дякую :)
— Луїза МакКоміскі
6

Ви можете зробити те, що зробив Джеймс Монтань зі своїм кодом у своїй відповіді, але це змусить його мерехтіти в Chrome (перевірено в V19).

Ви можете це виправити, якщо поставити "margin-top" замість "top". Не знаю, чому це працює з запасом tho.

$(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);
                }
            });
            });
— користувач3288218
джерело
2

У проекті я фактично маю заголовок, зафіксований внизу екрана при завантаженні сторінки (це додаток для малювання, тому заголовок знаходиться внизу, щоб надати максимум місця елементу полотна у широкому вікні перегляду).

Мені потрібно було, щоб заголовок став «абсолютним», коли він досягне нижнього колонтитула при прокрутці, оскільки я не хочу заголовок над колонтитулом (колір заголовка такий же, як і колір фону нижнього колонтитула).

Я взяв найдавнішу відповідь тут (під редакцією Гірге Мілло), і цей фрагмент коду працював для мого випадку використання. З деякими іграми я отримав цю роботу. Тепер фіксований заголовок красиво сидить над колонтитулом, як тільки він досягне нижнього колонтитула.

Просто подумав, що поділюсь своїм варіантом використання та тим, як він працював, і скажу спасибі! Додаток: 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?
— Циклонекод
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));
    }

Тож тепер фіксований елемент зупиниться безпосередньо перед колонтитулом. і не перекриватиметься з ним.

— мшахбазм
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.