Нужно ли показывать div для использования в качестве путевой точки?

Я использую путевые точки JQuery, чтобы попытаться вызвать события с помощью прокрутки мыши. Но сама страница не прокручивается. Я использую div "waypoint" в качестве триггеров, так как div с содержимым в них не должны прокручиваться. Но дивы путевых точек в настоящее время не регистрируются. Таким образом, вопрос в том, что у самих элементов div нет полос прокрутки, и я просто слушаю событие прокрутки, нужно ли мне показывать элементы div с помощью display:block, даже если у них нет содержимого?

Возможно, взгляд на разметку будет более полезным для понимания проблемы. Вот HTML-код:

<body>
    <div id="container">
        <header>
            <p class="homeLink">Words N' Pics</p>
            <div id="menuButton"><img class="menuIcon" src="images/menuIcon.png"/></div>
        </header>
        <div id="waypointOne"></div>
        <div id="waypointTwo"></div>
        <div id="waypointThree"></div>
        <div id="waypointFour"></div>
        <div id="slideOne" class="slider">
            <div class="sliderPic"><img src="images/Sgt-Bilko.jpg"/></div>
            <div class="sliderText"><p>This is come content just chilling right here.</p></div>
        </div>
        <div id="slideTwo" class="slider">
            <div class="sliderPic"><img src="images/Sgt-Bilko.jpg"/></div>
            <div class="sliderText"><p>This is come content just chilling right here.</p></div>
        </div>
        <div id="slideThree" class="slider">
            <div class="sliderPic"><img src="images/Sgt-Bilko.jpg"/></div>
            <div class="sliderText"><p>This is come content just chilling right here.</p></div>
        </div>
        <div id="slideFour" class="slider">
            <div class="sliderPic"><img src="images/ralph.jpg"/></div>
            <div class="sliderText"><p>This is come content just chilling right here.</p></div>
        </div>
    </div>
    <footer>
        <div id="arrowJumper"><img class="arrowIcon" src="images/greyArrow.png"/></div>
    </footer>
    <div id="menuOverlay" class="menuDiv">
        <ul id="menu">
            <li>Work.</li>
            <li>About.</li>
            <li>Careers.</li>
            <li>Ideas.</li>
            <li>News.</li>
            <li>Events.</li>
            <li>Contact.</li>
        </ul>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/waypoints.min.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>
</body>

Вот соответствующие фрагменты моего CSS (обратите внимание, это только сегмент. Остальное будет в конце скрипкой):

#waypointOne{
    position:absolute;
    top:150px;
}

#waypointTwo{
    position:absolute;
    top:250px;
}

#waypointThree{
    position:absolute;
    top:350px;
}

#waypointFour{
    position:absolute;
    top:450px;
}

И Jquery:

$(function () { // When the page has loaded,
    $('#waypointOne').waypoint(function () {
        alert("Waypoint 1 reached.");
    })
});

$(function () { // When the page has loaded,
    $('#waypointTwo').waypoint(function () {
        alert("Waypoint 2 reached.");
    })
});

$(function () { // When the page has loaded,
    $('#waypointThree').waypoint(function () {
        alert("Waypoint 3 reached.");
    })
});

Конкретный вопрос: "Почему путевые точки не собираются?" Но более широкий вопрос заключается в том, нужно ли показывать подобные дивы на экране, чтобы на них указывали точки маршрута (т. Е. Display:block)? или они могут быть скрыты и просто использоваться в фоновом режиме? Вот скрипка Обратите внимание, что в настоящее время щелчок сделает то, что должен делать свиток. Но свиток должен быть настороже, и это не так.

http://jsfiddle.net/rcJP9/

По какой-то причине щелчок не работает в скрипке. Но полностраничные div'ы должны скользить вверх, чтобы показать, что за ними стоит.

Источник

1 ответ

Основываясь на этом jsFiddle, я скажу, что точки привязки идентификатора не регистрируются, когда они не отображаются.

Как насчет этого? Должно быть практически невидимым, но все же занимать свое место в дом...

.visually-hidden { /*http://developer.yahoo.com/blogs/ydn/posts/2012/10/clip-your-hidden-content-for-better-accessibility/*/
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    padding:0 !important;
    border:0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
} 
body:hover .visually-hidden a, body:hover .visually-hidden input, body:hover .visually-hidden button { display: none !important; }

Вот еще один jsFiddle с этим на месте. Кажется, работает!

Источник
Другие вопросы по тегам