Вопрос по css, html, javascript – Как создать динамическую панель навигации, которая будет следовать за вами, когда вы достигнете определенного местоположения

1

Я хочу создать панель навигации, аналогичную этому сайту:

http://www.mysupermarket.co.uk/#/shelves/top_offers_in_asda.html

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

Когда вы получаете доступ кданный сайт, попробуйте прокрутить вниз, и вы поймете, о чем я говорю. Панель навигации, которая состоит из МОЕГО МАГАЗИНА, ПРЕДЛОЖЕНИЙ, ИДЕЙ и amp; ОБРАЗ ЖИЗНИ, ПЕКАРЬ и так далее ...

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

Here is the solution I've done

<code>window.onscroll = function(){
    if(getScrollTop()>140) {
        document.getElementById("menu").style.position="fixed";
    } else {
        document.getElementById("menu").style.position="";
    }
}

function getScrollTop() {
    if (window.onscroll) {
        // Most browsers
        return window.pageYOffset;
    }

    var d = document.documentElement;
    if (d.clientHeight) {
        // IE in standards mode
        return d.scrollTop;
    }

    // IE in quirks mode
    return document.body.scrollTop;
}
</code>
На этот вопрос уже ответили здесьstackoverflow.com/q/6691558/144432 Cengiz Can

Ваш Ответ

3   ответа
0

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

0

вы можете просто установить z-index для определенного номера, и это должно работать.

пример Z-индекс: 100;

3

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

Ты можешь найтирабочий пример и некоторые деталиВот

Однако, если вы хотите, чтобы ваша навигационная панель перемещалась от ее начального местоположения к верхней границе страницы при прокрутке страницы вниз, вы должны реализовать некоторый JavaScript для перехвата события прокрутки страницы и перемещения<div> соответственно.

Увидетьэтот вопрос например, как это сделать.

Спасибо, но я не хочу, чтобы меню продолжало следовать. Я хочу, чтобы навигация была точно такой же, как на данном сайте. У вас есть такие примеры? Alvis Chen
Я это сделал! Спасибо огромное!! Alvis Chen
@AlvisChen Хорошего дня
Проверьте этот ответstackoverflow.com/a/6691623/144432

Похожие вопросы