8

我的网站具有粘性导航功能，但无法在移动设备上运行...

如何让它在移动设备上保持粘性，或者如何防止它保持粘性（当然，在保持导航的同时）？

我到处寻找答案，但找不到有效的答案（并且没有禁用我的导航：）非常感谢您的帮助！

这是我的 index.html 标头的一部分：

<head>

<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/960.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js/smooth-scroll.js" type="text/javascript"></script>
<script src="js/jquery.sticky.js" type="text/javascript"></script>
<script src="contactform.js" type="text/javascript"></script>

<!-- sticky nav -->
<script type="text/javascript">
$(window).load(function(){
$("nav").sticky({ topSpacing: 0, className: 'sticky', center: true });
});
</script>

</head>

这是 jquery.sticky javascript 中的代码：

(function($) {
var defaults = {
        topSpacing: 0,
        bottomSpacing: 0,
        className: 'is-sticky',
        center: false
    },
    $window = $(window),
    $document = $(document),
    sticked = [],
    windowHeight = $window.height(),
    scroller = function() {
        var scrollTop = $window.scrollTop(),
            documentHeight = $document.height(),
            dwh = documentHeight - windowHeight,
            extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
        for (var i = 0; i < sticked.length; i++) {
            var s = sticked[i],
                elementTop = s.stickyWrapper.offset().top,
                etse = elementTop - s.topSpacing - extra;
            if (scrollTop <= etse) {
                if (s.currentTop !== null) {
                    s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
                    s.currentTop = null;
                }
            }
            else {
                var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
                if (newTop < 0) {
                    newTop = newTop + s.topSpacing;
                } else {
                    newTop = s.topSpacing;
                }
                if (s.currentTop != newTop) {
                    s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
                    s.currentTop = newTop;
                }
            }
        }
    },
    resizer = function() {
        windowHeight = $window.height();
    };

// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
if (window.addEventListener) {
    window.addEventListener('scroll', scroller, false);
    window.addEventListener('resize', resizer, false);
} else if (window.attachEvent) {
    window.attachEvent('onscroll', scroller);
    window.attachEvent('onresize', resizer);
}

$.fn.sticky = function(options) {
    var o = $.extend(defaults, options);
    return this.each(function() {
        var stickyElement = $(this);
        if (o.center)
            var centerElement = "margin-left:auto;margin-right:auto;";

        stickyId = stickyElement.attr('id');
        stickyElement
            .wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
            .css('width', stickyElement.width());
        var elementHeight = stickyElement.outerHeight(),
            stickyWrapper = stickyElement.parent();
        stickyWrapper
            .css('width', stickyElement.outerWidth())
            .css('height', elementHeight)
            .css('clear', stickyElement.css('clear'));
        sticked.push({
            topSpacing: o.topSpacing,
            bottomSpacing: o.bottomSpacing,
            stickyElement: stickyElement,
            currentTop: null,
            stickyWrapper: stickyWrapper,
            elementHeight: elementHeight,
            className: o.className
        });
    });
};
})(jQuery);
4

4 回答 4

23 
function isMobile() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

if (!isMobile()) {
//place script you don't want to run on mobile here

}
于 2014-06-12T05:07:31.100 回答
3

避免读取用户代理字符串，因为它可能被篡改或欺骗。使用Modernizr来测试用户环境究竟支持哪些功能，特别是对于触摸：if (Modernizr.touch)

满足您的需求：

<head>

<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/960.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js/smooth-scroll.js" type="text/javascript"></script>
<script src="js/jquery.sticky.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js" type="text/javascript"></script>
<script src="contactform.js" type="text/javascript"></script>

<!-- sticky nav -->
<script type="text/javascript">
$(window).load(function(){
    if (Modernizr.touch) {
        $("nav").sticky({ topSpacing: 0, className: 'sticky', center: true });
    }
});
</script>

</head>
于 2012-09-04T08:48:49.717 回答
2

您应该检查用户是否使用移动浏览器。如果是这样，请不要执行粘性插件方法。

<!-- sticky nav -->
<script type="text/javascript">

var isMobile = {
Android: function() {
    return navigator.userAgent.match(/Android/i) ? true : false;
},
BlackBerry: function() {
    return navigator.userAgent.match(/BlackBerry/i) ? true : false;
},
iOS: function() {
    return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
},
Windows: function() {
    return navigator.userAgent.match(/IEMobile/i) ? true : false;
},
any: function() {
    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
}
};

$(function(){
    if(! isMobile.any()){
        $("nav").sticky({ topSpacing: 0, className: 'sticky', center: true });
    }
});
</script>

用户代理检测的代码是从这里借来的

于 2012-09-04T08:45:02.767 回答
2

我认为一个好的解决方案是只检查屏幕或视口大小。这绝不是对移动设备的检查，但在小屏幕/视口上取消导航似乎很合理。我不是小屏幕上页面最重要的部分，网站内容才是。粘性导航并不是那么重要。

检查特定平台或设备是如此 1999 年，我不会推荐它。如果用户在 win8 平板电脑或其他设备上查看您的网站，您还需要那个粘性导航吗？

添加以下内容，<head>让移动设备知道您网站内容的宽度（将 960 更改为您拥有的任何宽度）：

<meta name="viewport" content="width=960px, initial-scale=1">

并在 javascript 中像这样检查（将 640 更改为您认为合适的任何内容）：

if (document.documentElement.clientWidth > 640 ) {
    $("nav").sticky({ topSpacing: 0, className: 'sticky', center: true });
}
于 2012-09-04T08:49:40.093 回答