Прикрепленное меню при прокрутке - вероятно, требуется JavaScript

Question

Прикрепленное меню при прокрутке - вероятно, требуется JavaScript

0

Это мой код: http://jsfiddle.net/spadez/usbs2/19/

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

http://css-tricks.com/examples/PersistantHeaders/

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

HTML

<div id="main">
    <div id="header">test</div>
    <div id="jumbo">test</div>
    <div id="select">menu</div>
    <div id="features">1
        <br />1
        <br />1
        <br />1
        <br />1
        <br />1
        <br />1
        <br />1
        <br />1
        <br />1
        <br />1
        <br />1
        <br />1
        <br />1
        <br />1
        <br />
    </div>
</div>

Jimmy 08 май 2014, в 17:22

Источник

Теги:

javascript

jquery

html

css

2 ответа

0

Если вы добавите position:fixed; для #header так что он будет автоматически сохранен наверху. Если заголовок не должен быть наверху все время (например, когда есть что-то выше заголовка, которому разрешено прокручивать экран), вам может понадобиться сценарий для добавления или удаления класса, содержащего это свойство css.

В другом ответе используется jQuery, это не-jQuery-версия:

var select = document.querySelector('#select');
var initialPosition = select.offsetTop;
addEventListener('scroll', function (event) {
    if (window.scrollY > initialPosition) {
        select.classList.add('fixed');
    } else if (select.classList.contains('fixed')) {
        select.classList.remove('fixed');
    }
});

И, конечно, добавьте класс в таблицу стилей:

.fixed {
    position:fixed;
    top:0;
}

Вот jsfiddle, показывающий рабочий скрипт

MarijnS95 08 май 2014, в 12:47

Ещё вопросы

SW4 · Accepted Answer · 2014-05-08T13-34-00.000Z

Демо-скрипт

Вы можете использовать jQuery с небольшим изменением CSS:

// get initial top position of menu
var init = $('#select').offset().top;
// listen to window scroll event
$(window).scroll(function () {
    // if top of window scrolled past top of menu
    if ($(window).scrollTop() > init) {
        // fix the menu to the top of the page
        $('#select').css({
            top: 0,
            position: 'fixed'
        });
    } else {
        // otherwise put it back in its regular position
        $('#select').css('position','relative');
    }
});

CSS

html, body {
    height: 100%;
    width:100%; /* <-- defined default width */
    margin: 0;
    padding: 0;
}
#main {
    height: 100%;
    width: 100%;
}
#header {
    height: 60px;
    background: pink;
    float: left;
    width: 100%;
}
#jumbo {
    height: 100%;
    background: blue;
}
#select {
    height: 60px;
    background-color:yellow;
    width:100%; /* <-- set width (relative to body) */
}