Исправить объект до окна браузера при прокрутке

Недавно я увидел новую интересную функцию в новом gmail, а также в предварительном просмотре HTML5, который фиксирует панель навигации в верхней части окна браузера при прокрутке. Панель может начинаться на 100 пикселей вниз по странице, но когда вы прокручиваете ее и она достигает верхней части окна браузера, она фиксируется там, пока вы не прокрутите назад вверх, где она была первоначально расположена.

Мой вопрос: как я могу сделать этот эффект или сделать что-то подобное этому эффекту?

Надеюсь, вы поймете мой вопрос и то, что я пытаюсь описать.

Ответы

Ответ 1

Если вы хотите, чтобы элемент начал работать дальше на странице, а затем продолжайте фиксироваться сверху при прокрутке вниз, это может быть хорошим началом:

http://jsfiddle.net/cc48t/

Ответ 2

Я знаю, что это сообщение немного устарело, но все же очень полезно. Я просто хотел добавить версию jquery (немного более чистую и настраиваемую), но это модифицированная версия ответа Andrew D.

В этом случае у меня нет двух классов, вместо этого у меня есть относительный позиционный div, и когда я достигаю определенной точки (max_scroll), я добавляю класс к объекту, и этот класс делает его float

Ниже представлен javascript (все сделано внутри функции готовности документа)

<script type="text/javascript">
var max_scroll = 400; // this is the scroll position to start positioning the nav in a fixed way
$(document).ready(function(){

        $(window).scroll(function () {
        var navbar = $(".filterbutton");

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(scrollTop > max_scroll && !navbar.is(".filterbuttonFixed")) {
                navbar.addClass("filterbuttonFixed");
                // console.log("go floated");
        }
        else if(scrollTop < max_scroll && navbar.is(".filterbuttonFixed") ) {
                // console.log("return to normal");
                navbar.removeClass("filterbuttonFixed");
        }

}
});

</script>

и это мой контейнер контейнера nav-bar

<div id="floatable-nav-bar" class="my-relative-position-class">
    <nav class="page-menu">
        <ul class="scroll-nav">
            <li><a class="selected" href="#first">Section 1</a></li>
            <li><a class="" href="#second">Section 2</a></li>
            <li><a class="" href="#third">Section 3</a></li>
            <li><a class="" href="#fourth">Section 4</a></li>
        </ul>
    </nav>
</div>

и, что не менее важно, мой стиль с навигацией

#floatable-nav-bar.nav_floated {
    position:fixed;
    top:1px;
    left: 0;
    width:100%;
    text-align: center;
    background: #EEE;
    padding: 5px 0;
}

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

Ответ 3

Если браузер поддерживает "позицию: исправлено", следующий пример javascript выполняется быстрее:

<html>
<head>
<style>
html,body {
  margin: 0;
}
#navbar.navbar_fixed {
  position:fixed;
  top:0px;
  width:100%;
  height:100px;
  background-color:#f00;
}
#navbar.navbar_absolute {
  position:absolute;
  top:100px;
  width:100%;
  height:100px;
  background-color:#f00;
}
</style>
<script type="text/javascript">

function window_onload() {
  window.addEventListener("scroll",navbar_reset_top,false);
}

var navbar_top=100;

function navbar_reset_top() {
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
  if(scrollTop>navbar_top&&navbar.className==="navbar_absolute") {
    document.getElementById("navbar").className="navbar_fixed";
  }
  else if(scrollTop<navbar_top&&navbar.className==="navbar_fixed") {
    document.getElementById("navbar").className="navbar_absolute";
  }
}

</script>
</head>
<body onload="javascript:window_onload();">
<div id="navbar" class="navbar_absolute">Navigation Bar</div>
<div style="height:2000px;background-color:#ff0;">Content</div>
</body>
</html>

Ответ 4

Использование:

#element {
  position: fixed;
  right: 200px;
  top: 200px;
}

"fixed" означает, что элемент расположен относительно окна браузера.

Ответ 5

Установив позицию div на position:fixed

Ответ 6

Вы можете сделать это примерно так:

Пример

CSS

body {
    height: 3000px;
    top: 0;

}
#image {
    width: 100%;
    background: #444;
    height: 50px;
}
#scroller{
    height:100px;
    background:#ccc;
}
.stuck{
    position:fixed;
    z-index:100;
    width:100%;
    top:0;
}

script

$(window).scroll(function() {
                if ($(window).scrollTop() > 50) {
                    $('#scroller').addClass('stuck');
                } else {
                    $('#scroller').removeClass('stuck');
                }

            });

после прокрутки 50 px это изменит css скроллера.

это может быть хорошим началом

Ответ 7

Вместо определения длины прокрутки, почему мы не можем определить позицию объекта? скажем, когда он достигает вершины: 0, затем запускаем script. Таким образом, он будет более дружественным к устройству.