Сделать элемент фиксированным в прокрутке

Ответ 1

Вы можете сделать это с помощью простого jQuery:

http://jsfiddle.net/jpXjH/6/

var elementPosition = $('#navigation').offset();

$(window).scroll(function(){
        if($(window).scrollTop() > elementPosition.top){
              $('#navigation').css('position','fixed').css('top','0');
        } else {
            $('#navigation').css('position','static');
        }    
});

Ответ 2

Я не буду беспокоиться о jQuery или LESS. Я считаю, что структура javascript чрезмерна.

window.addEventListener('scroll', function (evt) {

  // This value is your scroll distance from the top
  var distance_from_top = document.body.scrollTop;

  // The user has scrolled to the tippy top of the page. Set appropriate style.
  if (distance_from_top === 0) {

  }

  // The user has scrolled down the page.
  if(distance_from_top > 0) {

  }

});

Ответ 3

Есть некоторые проблемы с реализацией этого, на которые не ответил оригинальный принятый ответ:

• Событие onscroll окна запускается очень часто. Эта подразумевает, что вам нужно либо использовать очень опытный слушатель, либо вы должны каким-то образом задержать слушателя. Создатель jQuery Джон Ресиг состояния здесь, как может быть применен механизм с задержкой и причины, по которым вы должны сделай это. На мой взгляд, учитывая сегодняшние браузеры и исполнитель-исполнитель тоже сделает это. Вот реализация шаблона, предложенная Джоном Ресигом
• Позиция пути: фиксированная работает в css, если вы прокручиваете страницу вниз и перемещаете элемент из положения: static в position: fixed, страница будет "прыгать" немного, потому что документ "теряет" высоту элемента, Вы можете избавиться от этого, добавив высоту в scrollTop и заменив потерянную высоту в документе на другой объект. Вы также можете использовать этот объект, чтобы определить, был ли липкий элемент уже перемещен на position: fixed и уменьшить количество обращений к возврату кода position: fixed в исходное состояние: Посмотрите на скрипку здесь
• Теперь единственная дорогая вещь с точки зрения производительности, которую выполняет обработчик, - это вызов scrollTop для каждого вызова. Так как у обработчика интервалов также есть свои недостатки, я остановлюсь, чтобы утверждать, что вы можете повторно подключить прослушиватель событий к исходному прокручиваемому событию, чтобы он чувствовал себя более беззаботным без особых забот. Вам придется профилировать его, хотя в каждом браузере вы нацеливаетесь/поддерживаете. Посмотрите, как работает здесь

Здесь код:

JS

/* Initialize sticky outside the event listener as a cached selector.
 * Also, initialize any needed variables outside the listener for 
 * performance reasons - no variable instantiation is happening inside the listener.
 */
var sticky = $('#sticky'),
    stickyClone,
    stickyTop = sticky.offset().top,
    scrollTop,
    scrolled = false,
    $window = $(window);

/* Bind the scroll Event */
$window.on('scroll', function (e) {
    scrollTop = $window.scrollTop();

    if (scrollTop >= stickyTop && !stickyClone) {
        /* Attach a clone to replace the "missing" body height */
        stickyClone = sticky.clone().prop('id', sticky.prop('id') + '-clone')
        stickyClone = stickyClone.insertBefore(sticky);
        sticky.addClass('fixed');
    } else if (scrollTop < stickyTop && stickyClone) {
        /* Since sticky is in the viewport again, we can remove the clone and the class */
        stickyClone.remove();
        stickyClone = null;
        sticky.removeClass('fixed');
    }
});

CSS

body {
    margin: 0
}
.sticky {
    padding: 1em;
    background: black;
    color: white;
    width: 100%
}
.sticky.fixed {
    position: fixed;
    top: 0;
    left: 0;
}
.content {
    padding: 1em
}

HTML

<div class="container">
  <div id="page-above" class="content">
    <h2>Some Content above sticky</h2>
    ...some long text...
  </div>
  <div id="sticky" class="sticky">This is sticky</div>
  <div id="page-content" class="content">
    <h2>Some Random Page Content</h2>...some really long text...
  </div>
</div>

Ответ 4

Здесь вы идете, без фреймворков, коротких и простых:

var el = document.getElementById('elId');
var elTop = el.getBoundingClientRect().top - document.body.getBoundingClientRect().top;

window.addEventListener('scroll', function(){
    if (document.documentElement.scrollTop > elTop){
        el.style.position = 'fixed';
        el.style.top = '0px';
    }
    else
    {
        el.style.position = 'static';
        el.style.top = 'auto';
    }
});

Ответ 5

Вы хотите использовать jQuery WayPoints. Это очень простой плагин и обеспечивает то, что вы описали.

Самая простая реализация

    $('.thing').waypoint(function(direction) {
  alert('Top of thing hit top of viewport.');
});

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

Эта страница покажет вам все примеры и информацию, которые вам нужны.

В будущем ссылка на пример остановки и запуска этого веб-сайта. Это пример "в дикой природе".

Ответ 6

Вы можете сделать это с помощью css тоже.

просто используйте position:fixed; за то, что вы хотите исправить при прокрутке вниз.

у вас могут быть несколько примеров:

http://davidwalsh.name/demo/css-fixed-position.php

http://demo.tutorialzine.com/2010/06/microtut-how-css-position-works/demo.html

Ответ 7

Вы можете перейти на веб-сайт LESS CSS http://lesscss.org/

Их закрепляемое меню светлое и хорошо работает. Единственное предостережение в том, что эффект имеет место после завершения прокрутки. Просто просмотрите источник, чтобы увидеть js.

Ответ 8

window.addEventListener("scroll", function(evt) {
    var pos_top = document.body.scrollTop;   
    if(pos_top == 0){
       $('#divID').css('position','fixed');
    }

    else if(pos_top > 0){
       $('#divId').css('position','static');
    }
});

Ответ 9

Обычное решение Javascript (DEMO):

<br/><br/><br/><br/><br/><br/><br/>
<div>
  <div id="myyy_bar" style="background:red;"> Here is window </div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


<script type="text/javascript">
var myyElement = document.getElementById("myyy_bar"); 
var EnableConsoleLOGS = true;           //to check the results in Browser Inspector(Console), whenever you are scrolling
// ==============================================



window.addEventListener('scroll', function (evt) {
    var Positionsss =  GetTopLeft ();  
    if (EnableConsoleLOGS) { console.log(Positionsss); }
    if (Positionsss.toppp  > 70)    { myyElement.style.position="relative"; myyElement.style.top = "0px";  myyElement.style.right = "auto"; }
    else                            { myyElement.style.position="fixed";    myyElement.style.top = "100px";         myyElement.style.right = "0px"; }
});



function GetOffset (object, offset) {
    if (!object) return;
    offset.x += object.offsetLeft;       offset.y += object.offsetTop;
    GetOffset (object.offsetParent, offset);
}
function GetScrolled (object, scrolled) {
    if (!object) return;
    scrolled.x += object.scrollLeft;    scrolled.y += object.scrollTop;
    if (object.tagName.toLowerCase () != "html") {          GetScrolled (object.parentNode, scrolled);        }
}

function GetTopLeft () {
    var offset = {x : 0, y : 0};        GetOffset (myyElement.parentNode, offset);
    var scrolled = {x : 0, y : 0};      GetScrolled (myyElement.parentNode.parentNode, scrolled);
    var posX = offset.x - scrolled.x;   var posY = offset.y - scrolled.y;
    return {lefttt: posX , toppp: posY };
}
// ==============================================
</script>