2

我已经使用 darsain 的 Sly 滑块设置了一个水平滚动导航，但也将它与一些 jQuery 结合起来，当用户滚动页面时将相应的导航设置为活动状态。然而，在移动设备上，两个导航项显示了活动的 CSS，尽管只有一个反映了添加的“活动”类。

问题：

  • Sly 设置为在单击时更改活动状态，因为这对于导航来说是正常的
  • 由于上述设置，如果有人只是在页面中滚动，他们的活动状态会因为我的附加 jQuery 而发生变化，但是因为 Sly 只在点击时识别活动，所以滑块在滚动时不会强制使活动项目居中。
  • 由于这个问题，用户将不得不横向滚动导航以查看其他导航项目是什么，这将为单击的项目添加一个活动状态，但如果他们继续滚动，下一个可见部分也将获得活动 CSS （因为我添加了 jQuery）。

错误： 由于触摸滚动，这显然是移动唯一的问题，但这是我在手机上调试时发现的两个错误：

  1. “由于目标被视为被动，无法在被动事件侦听器中阻止默认设置。”

  2. “忽略取消使用可取消 = false 的 touchend 事件的尝试，例如，因为滚动正在进行中且无法中断。”

请参阅此处的错误屏幕截图和显示“活动”CSS 的两个链接

我想弄清楚的是，是否有一种方法可以允许基于单击或滚动更改活动状态的 jQuery 函数，但如果发生新的滚动或单击，请确保删除活动的 CSS？就像看起来两者都在工作一样，但是，当有人在点击后滚动时，它们似乎只是重叠。

任何想法或方向都将有助于解决这个问题！我在这里包含了一个基本的JSFiddle（如果你想真正看到这个问题，请检查来自移动设备的链接）。这是正在使用的 jQuery（包括 Sly）：

jQuery(document).ready(function($) {

var stickyNavSpot = $('div.mb-menu').offset().top - 93;
    var topHeight = $('div.navbar').outerHeight();

    var stickyNav = function() {
        var scrollTop = $(window).scrollTop();

        if (scrollTop >= stickyNavSpot) {
            $('div.mb-menu').css ({
                'position': 'fixed',
                'top': topHeight+'px',
                'background-color': 'white'
            });
        } else if (scrollTop < stickyNavSpot){
            $('div.mb-menu').css ({
                'position': 'relative',
                'top': '0',
                'padding-top': '10px',
                'margin-left': '-20%'
            });
        } 
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
    $(window).resize(function() {
        stickyNav();
    });

var sections = jQuery('.anchor_space');
var nav = jQuery('div.mb-menu');
var nav_height = nav.outerHeight();

jQuery(window).on('scroll', function () {
    var cur_pos = jQuery(this).scrollTop();

        sections.each(function() {
            var top = jQuery(this).offset().top - 160,
                bottom = top + jQuery(this).outerHeight();

            if (cur_pos >= top && cur_pos <= bottom) {
                nav.find('li').removeClass('active');
                sections.removeClass('active');

                jQuery(this).addClass('active');

nav.find('li[title="#'+jQuery(this).attr('id')+'"]').addClass('active');
            }
        });

});

});    


jQuery(function () {
 jQuery(".scroll").click(function(event) {
            event.preventDefault();
            jQuery('html, body').animate({
                scrollTop: jQuery(this.title).offset().top-205},
                500);
        }); 
});
jQuery(function($){
'use strict';
(function () {
var $frame = jQuery('#forcecentered');
    var $wrap  = $frame.parent();

    // Call Sly on frame
    $frame.sly({
        horizontal: 1,
        itemNav: 'basic',
        smart: 1,
        activateMiddle: false,
        activateOn: 'click',
        mouseDragging: 1,
        touchDragging: 1,
        releaseSwing: 1,
        startAt: 0,
        scrollBy: 0,
        speed: 300,
        elasticBounds: 1,
        easing: 'easeOutExpo',
        dragHandle: 1,
        dynamicHandle: 1,
        clickBar: 1
    });
}());
$(window).on('resize', function () { $frame.sly('reload'); });
});
4

0 回答 0