Question

我有一个javascript代码，使用.fadeOut .fadeIn函数旋转几个div，我在侧边栏上有相同的div浮动，所以当你滚动时位置保持固定。当窗口大于980px但在移动设备上开始重叠时，这种方法非常有效。我想知道是否有人能够帮助我使用代码，以便在窗口小于980px时不运行滚动功能。下面是我用来在滚动时修复侧边栏的脚本。

$(function(){
    var stickyRibbonTop = $('.rotate').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyRibbonTop ) {
                    $('.rotate').css({position: 'fixed', top: '0px'});
            } else {
                    $('.rotate').css({position: 'relative'});
            }
    });

}）;

我正在使用的测试网站是beta.badsentinel.com。请检查并缩小窗口大小，以便更好地了解我在说什么。侧边栏将开始重叠。

提前感谢。

Answer 1

不是设置CSS，而是添加和删除类。这样，您可以使用媒体查询设置每个类的功能。

Answer 2

你应该尝试：

function widthDetect(){
if (($(window).width() <= 980  )) {
    var stickyRibbonTop = $('.rotate').offset().top;
    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyRibbonTop ) {
                    $('.rotate').css({position: 'fixed', top: '0px'});
            } else {
                    $('.rotate').css({position: 'relative'});
            }
    });
}}
widthDetect();
$(window).resize(function(){
    widthDetect();
});

您也可以使用css媒体查询。

@media only screen and (max-width: 980px) { 
.rotate { position:relative !important;}
}

禁用某些JavaScript代码仅适用于移动设备

2 个答案: