Я пытаюсь скопировать этот jsfiddle, который при прокрутке вниз придерживается панели вверх; но есть что-то не так, что я не могу определить.

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

<html>
    <head>
        <style>
            /* css here */
        </style>
    </head>
    <body>
        <!-- html here -->
        <script>
            // javascript here
        </script>
    </body>
</html>

Вот как это выглядит:

<html>
    <head>
        <style>
        html, body {
            min-height: 100%;
            padding: 0;
            margin: 0;
        }
        .stick {
            position: fixed;
            top: 0;
        }
        #a8 {
            height: 50px;
            width: 100%;
            background: #DDD;
        }
        </style>
    </head>
    <body>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div id="a8"></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>
        <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>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <script>
        var top = document.getElementById('a8').offsetTop;

        window.onscroll = function() {
            var y = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
            if (y >= top) {
                a8.className = 'stick';
            }
            else {
                a8.className = '';
            }
        };
        </script>
    </body>
</html>

После проверки похожих вопросов (здесь, здесь и здесь), все они ссылаются на тот факт, что страница еще не отображается при запуске кода js. Размещение js внизу (что я уже сделал) должно решить проблему; но в любом случае я также попытался обернуть JS с

$(document).ready(function() {
    // code here
});

И

window.onscroll = function() {
    // code here
});

И

$(window).onload(function(){
    // code here
});

Но не помогло.

Чего мне не хватает?

1
J0ANMM 11 Янв 2017 в 14:29

3 ответа

Лучший ответ

Я обнаружил, что имя переменной top неоднозначно с window.top, который является самым верхним фреймом. так что просто переименуйте его как-нибудь как top1, чтобы решить проблему!

var top1 = document.getElementById('a8').offsetTop;
4
S.Serpooshan 11 Янв 2017 в 11:56

Изменение вашего сценария на это должно помочь.

 <script>
     var myTop = document.getElementById('a8').offsetTop;
    window.onscroll = function() {
        var y = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
        if (y >= myTop) {
            a8.className = 'stick';
        }
        else {
            a8.className = '';
        }
    };
</script>

Мой первоначальный ответ был неверным, не имеет ничего общего с загрузкой, но он имеет отношение к свойство top окна.

1
Bobby Tables 11 Янв 2017 в 11:59

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

document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);

Это тоже будет работать.

    document.addEventListener('DOMContentLoaded', function() {
        var top = document.getElementById('a8').offsetTop;

    window.onscroll = function() {
        var y = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
        if (y >= top) {
            a8.className = 'stick';
        }
        else {
            a8.className = '';
        }
    };
    }, false);
0
Aqdas 11 Янв 2017 в 12:18