Question

这是我的脚本我想为响应式或移动视图禁用此脚本我尝试了不同的方式，但它无法正常工作。

<script type="text/javascript">
$(function(){ // document ready
    if ($('#sidebar').length) { // make sure "#sticky" element exists
        var el = $('#sidebar');
        var stickyTop = $('#sidebar').offset().top; // returns number
        var stickyHeight = $('#sidebar').height();

        $(window).scroll(function(){ // scroll event
            var limit = $('#img1').offset().top - stickyHeight - 15;

            var windowTop = $(window).scrollTop(); // returns number

            if (stickyTop < windowTop){
                el.css({ position: 'fixed', top: 0 });
            }
            else {
                el.css('position','static');
            }

            if (limit < windowTop) {
                var diff = limit - windowTop;
                el.css({top: diff});
            }
        });
    }
});
</script>

Answer 1

获取视口的宽度和高度（Jquery）：

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

在你的情况下：

 if($(window).width()>=768){
//your script code goes here and it will work only if the viewport of the device is greater that or equal to 768 (change the value according to your need)
}

Answer 2

尝试使用modernizr用于此目的，它具有广泛的功能检测技术，例如手机等触控设备。

首先包括像这样的现代化，

https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js

然后在modernizr中使用你的函数/ javascript，

if(!Modernizr.touch){ 

    $(function(){ // document ready
        if ($('#sidebar').length) { // make sure "#sticky" element exists
        var el = $('#sidebar');
        var stickyTop = $('#sidebar').offset().top; // returns number
        var stickyHeight = $('#sidebar').height();

        $(window).scroll(function(){ // scroll event
        var limit = $('#img1').offset().top - stickyHeight - 15;

        var windowTop = $(window).scrollTop(); // returns number

        if (stickyTop < windowTop){
            el.css({ position: 'fixed', top: 0 });
        }
        else {
            el.css('position','static');
        }

        if (limit < windowTop) {
            var diff = limit - windowTop;
            el.css({top: diff});
        }
    });
   }
});        

}

当没有触摸设备

时它会工作

Answer 3

<script type="text/javascript">
$(function(){ // document ready

 // screen.width will detect device width and will execute greater than 767(      from iPad) or can be set according to requirement

if ($('#sidebar').length && screen.width > 767 ) { // make sure "#sticky" element exists
    var el = $('#sidebar');
    var stickyTop = $('#sidebar').offset().top; // returns number
    var stickyHeight = $('#sidebar').height();

    $(window).scroll(function(){ // scroll event
        var limit = $('#img1').offset().top - stickyHeight - 15;

        var windowTop = $(window).scrollTop(); // returns number

        if (stickyTop < windowTop){
            el.css({ position: 'fixed', top: 0 });
        }
        else {
            el.css('position','static');
        }

        if (limit < windowTop) {
            var diff = limit - windowTop;
            el.css({top: diff});
        }
    });
}
});
</script>

禁用粘性侧边栏以获得响应式视图

3 个答案: