Как навести фиксированный элемент до тех пор, пока он не достигнет некоторой точки

У меня есть div, который мне нужно зафиксировать в нижней части экрана, пока он не достигнет некоторого момента после прокрутки и не остановится там и не останется. Если пользователь начинает прокручивать назад - сделайте его исправленным после прохождения той же точки.

Любые идеи о том, как это можно сделать?

EDIT: (здесь мой текущий код, который не работает)

$(window).scroll(function () {
    if ($(this).scrollTop() < $(document).height() - 81) {
        $('#bottom_pic').css('bottom', "0px");
    }
    else {
        $('#bottom_pic').css('bottom', "81px");
    }
});

CSS

#bottom_pic 
{
    position: fixed;
    bottom: 0px;
}

код >

Спасибо!

Ответ 1

jQuery Waypoints - отличный плагин для достижения таких вещей: Демонстрация фиксированного div после прокрутки

Ответ 2

У меня была аналогичная проблема с сайтом. У меня был контейнер div, который имел две колонки. Правая колонка, содержащая статьи с длинным текстом. В левом столбце был список навигации div, содержащий ссылки привязки к каждой текстовой статье в правом столбце. Я хотел, чтобы навигация отображалась на странице. Однако он не должен превышать тексты или под ними. Я написал для него следующую функцию:

HTML:
<div id="texts-container">
     <div id="texts">Right column of long texts</div>
     <div id="texts-sidebar">Left Column navigation that scrolls with page</div>
</div>

JS Function:
function shift_text_nav() {
     var top = $(window).scrollTop();
     var t = $('#texts-container').offset().top;
     var left = $('#texts-container').offset().left;
     if (top > (t)) {
          var text_height = $('#texts').height();
          var nav_height = $('#texts-sidebar').height();

          if(t + text_height - nav_height  - 40< top){
               $('#texts-sidebar').css({'position':'absolute','top': (text_height - nav_height) + 'px','left':'0px'});
          }else{
               $('#texts-sidebar').css({'position':'fixed','top':'40px','left':left+'px'});
          }
     } else {
          $('#texts-sidebar').css({'position':'absolute','top':'40px','left':'0px'});
     }
}

$(window).scroll(function() { shift_text_nav(); });
$(window).resize(function() { shift_text_nav(); });
shift_text_nav();

Ответ 3

Я понимаю, что это старая тема... однако в последнее время мне нужно было кое-что реализовать. Ниже приведен код для выполнения задачи (имейте в виду, что вам может потребоваться изменить css, чтобы он отображался в соответствующем месте для ваших нужд, мой должен был прикрепить элемент вверху экрана). Кроме того, это зависит от jQuery.

$(document).ready(function () {
    //  initialize the dock
    Dock();

    // add the scroll event listener
    if (window.addEventListener) {
        window.addEventListener('scroll', handleScroll, false);
    } else {
        window.attachEvent('onscroll', handleScroll);
    }
});

function Dock() {
    Dock.GetDock = document.getElementById('dockable');
    Dock.NewScrollOffset = getScrollOffset();
    Dock.DockBottomPos = getDockBottomPos();
    Dock.DockTopPos = getDockTopPos();
}

function getScrollOffset() {
    var scrollOffset = window.pageYOffset
                ? window.pageYOffset
                : document.documentElement.scrollTop;
    return scrollOffset;
}

function getDockBottomPos() {
    var dockTopPos = getDockTopPos();
    var dockHeight = $('#dockable').height();
    return (dockTopPos + dockHeight);
}

function getDockTopPos() {
    var dockTopPos = $('#dockable').offset().top;
    return dockTopPos;
}

function handleScroll(){
     if (window.XMLHttpRequest) {

          //  determine the distance scrolled from top of the page
          Dock.NewScrollOffset = getScrollOffset();

          if (Dock.NewScrollOffset >= Dock.DockBottomPos) {
              Dock.GetDock.className = "fixed";
              return;
          }
          if (Dock.NewScrollOffset <= Dock.DockTopPos) {
              Dock.GetDock.className = "";
          }
      }
 }

CSS

#dockable
{
    position: relative;
    width: inherit;
}
#dockable.fixed
{
    position: fixed;
    top: 0px;
}

Пример док-станции будет...

#dockable div
{
    display: inline;
    *zoom: 1;
    height: 25px;
    line-height: 25px;
    padding: 5px 10px 5px 10px;
}
<div id="dockable">
     <div><a href="#">Menu Item 1</div>
     <div><a href="#">Menu Item 2</div>
     <div><a href="#">Menu Item 3</div>
</div>

Ответ 4

$(window).scroll(function() {
    checkPosition('#myelement');
});

function checkPosition( element ){
//choose your limit
var positionLimit = 416;
var y = getOffsetY();

if( y <= positionLimit ){
    $(element).css({'position':'fixed','bottom':'0'});
}
else{
    $(element).css({'position':'relative'});
}
}

//для совместимости с браузером

function getOffsetY(){

var  scrOfY = 0;
    if( typeof( window.pageYOffset ) == 'number' ) {
        //Netscape compliant
        scrOfY = window.pageYOffset;
    } else if( document.body && ( document.body.scrollTop ) ) {
        //DOM compliant
        scrOfY = document.body.scrollTop;
    } else if( document.documentElement && (  document.documentElement.scrollTop ) ) {
        //IE6 standards compliant mode
        scrOfY = document.documentElement.scrollTop;
    }

return scrOfY;
}

Это должна быть работа. Чтобы получить смещение y элемента, вам нужно будет использовать функцию, чтобы иметь совместимость с браузером. Все, что вам нужно сделать, это установить правильное предельное положение.

Ответ 5

Есть два способа сделать это:

либо идти с абсолютной позицией, и компенсировать каждое движение полосы прокрутки ниже определенного уровня
или перейдите с фиксированной позицией и скопируйте ее выше определенного уровня.

В обоих случаях вам нужна "линейная кривая с вмятиной" относительно "значения позиции над значением прокрутки". Для этого лучше всего использовать функции Math.min/max. Подсказка: фиксированный подход менее шаткий для части покоя. Если вам не нужна поддержка IE6 (которая не знает фиксированного), перейдите к решению #fix.

<style type="text/css">
body { 
    height:1000px;  /* create something to scroll*/
    border-left: 20px dotted blue; /* and something fancy */
}

#abs { position:absolute; top: 200px; left:100px; background-color:#FCC; }
#fix { position:fixed;    top: 200px; left:200px; background-color:#CCF; }      
</style>

<div id="abs">Absolute</div>          <div id="fix">Fixed</div>

<script type="text/javascript"> <!-- have jQuery included before -->
    $(window).scroll( function () {
        $('#abs').css('top', 200 + Math.min( 150, $(window).scrollTop() ));
        /* read: up to 150, compensate scrolling,
                    then stick with a fixed value (scroll along) */

        $('#fix').css('top', 200 - Math.max( 0 , $(window).scrollTop() - 150 )); 
        /* read: do nothing in the interval [0;150] */
    });         
</script>

Ответ 6

$(window).scroll(function(){
  if($(this).scrollTop() < $(document).height() -1000){
    $(selector).css("position", "fixed");
    $(selector).css("bottom","0");
  }
  else
  {
    $(selector).css('bottom', "81px");
  }
});

Я пробовал этот код, и он работает для $(document).height() -500). Но по какой-то причине я не понимаю, что это не работает, когда значение 500 уменьшается до 100 или 81.

Попробуйте изменить это значение и увидеть разницу

Ответ 7

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

Надеюсь, это поможет кому-то еще.

// Height and footer settings
var rm_header_height = 67; // px
var rm_footer_height = 200; // px

// Store so jquery only has to find them once
var rm_gutters = $("#rm_gutter_left, #rm_gutter_right");

// Set initial gutter position
rm_gutters.css("top", rm_header_height + "px");

// Attach to window scroll event
$(window).scroll(function() {
    st = $(this).scrollTop();
    h = $(document).height() - $(window).height();

    // Is the header still in view?
    if (st < rm_header_height) {
        rm_gutters.css({"top": rm_header_height + "px", "bottom": "auto"});

    // Are neither the footer or header in view?
    } else if (st < h - rm_footer_height) {
        rm_gutters.css({"top": 0, "bottom": "auto"});

    // Is the footer in view?
    } else {
        rm_gutters.css({"top": "auto", "bottom": rm_footer_height + "px"});
    }
});

Ответ 8

$(window).scroll(function () {
    if ($(this).scrollTop() < $(document).height() - 81) {
        $('#bottom_pic').css("position", "fixed");
        $('#bottom_pic').css('bottom', "0px");
    }
    else {
        $('#bottom_pic').css("position", "absolute");
        $('#bottom_pic').css({'top':(($(document).height())-81)+'px'});
    }
});

Это приведет к тому, что div будет зафиксирован снизу до 81px от вершины. Как только он туда доберется, он останется там.

Ответ 9

*@roman , the below function triggers the scroll event* ,

вы можете разместить всю свою собственную логику внутри этого///вычисления, позиционирования и т.д.

$(window).scroll(function () {
    /* this function gets triggered whenever you do scroll.
       Write all your logic inside this */
});