通过单击向上滚动时，jQuery Waypoints粘性导航的功能降低了1px [英] jQuery Waypoints sticky nav when scrolling up via a click is 1px off

问题描述

我几乎要用Waypoint弄乱头发.首先，我对javascript的了解还很远.我正在使用Waypoints进行以下操作:1)将导航栏固定在屏幕顶部的某个点(可以正常工作)，以及2)在到达某些区域时突出显示导航栏.一切正常，除非您单击需要向上导航航路点的导航项目，例如点击超值"，然后点击目的地".您会注意到航路点似乎在一个像素外，并且异常值"仍然突出显示.如果您向上滚动一个像素，目的地"将最终突出显示.这是复制此行为的唯一方法...单击向下滚动的导航项可以正常工作.这是我的JS: http://jsfiddle.net/TreUd/.这是在其上实现的网站: http://ifb.thepinkrobot.com/.谢谢您的帮助.不胜感激.

I'm close to tearing my hair out with Waypoints. First of all, I'm far from being experienced in javascript. I'm using Waypoints to 1) fix the nav to the top of the screen at a certain point (this works fine) and 2), highlight nav items when certain sections are reached. Everything works perfectly except when you click a nav item that requires the waypoint direction up, e.g. click "Exceptional Value" and then "Destinations." You'll notice that the waypoint seems to be a pixel off and "Exceptional Value" is still highlighted. If you scroll up a pixel, "Destinations" finally highlights. This is the only way to replicate this behavior... clicking nav items that scroll down works fine. Here is my JS: http://jsfiddle.net/TreUd/. Here is the site it's implemented on: http://ifb.thepinkrobot.com/. Thanks for any help... it's greatly appreciated.

        <!-- waypoints -->
    <script type="text/javascript">
    $(document).ready(function(){
      $('.nav-container').waypoint(function(direction) {
        $('nav#main').toggleClass('sticky', direction === 'down');  
      });
    });
    </script>

    <script type="text/javascript">
    var sections = $("section");
        var navigation_links = $("nav a");

        sections.waypoint({
            handler: function(event, direction) {

                var active_section;
                active_section = $(this);
                if (direction === "down") active_section = active_section.prev();

                var active_link = $('nav a[href="#' + active_section.attr("id") + '"]');
                navigation_links.removeClass("selected");
                active_link.addClass("selected");

            },
            offset: 50
        })
    </script>
    <!-- end waypoints -->

推荐答案

这绝对是一个奇怪的问题.标头上似乎有一个3px的边框，这可能是导致问题的原因.但是，如果将航路点的偏移量从50增加到53，似乎可以解决此问题.

It's definitely a strange one. There seems to be a 3px border on your header which might be causing the issue. However if you increase the offset of your waypoints from 50 to 53 seems to fix the problem.

var sections = $("section");
var navigation_links = $("nav a");

    sections.waypoint({
        handler: function (event, direction) {

            var active_section;
            active_section = $(this);
            if (direction === "down") active_section = active_section.prev();

            var active_link = $('nav a[href="#' + active_section.attr("id") + '"]');
            navigation_links.removeClass("selected");
            active_link.addClass("selected");

        },
        offset: 53
    })

这篇关于通过单击向上滚动时，jQuery Waypoints粘性导航的功能降低了1px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！