Question

我的脚本会根据滚动位置淡化我的徽标（基于Daniel Stuart的解决方案：http://danielstuart.ie/2010/09/20/my-jquery-mini-logo/）

    <script>
        var $scrolled = new Boolean(false);
        jQuery.noConflict();
        jQuery(window).scroll(function () {
            position = jQuery(window).scrollTop();
            if(position >=250 && $scrolled == false){
                $scrolled = new Boolean(true);
                jQuery('.small-logo').fadeIn('normal', function() { });
            }else if(position <250 && $scrolled == true){
                $scrolled = new Boolean(false);
                jQuery('.small-logo').fadeOut('normal', function() { });
            }
        });
    </script>

问题是该网站是响应式的，我不希望在浏览器宽度小于768px时加载该网站。我怎样才能实现这一目标，或者不会发生这种情况？

Answer 1

$(window).width() is what you need：

jQuery(window).scroll(function () {
      if (jQuery(window).width() > 768) {
        position = jQuery(window).scrollTop();
        if(position >=250 && $scrolled == false){
            $scrolled = new Boolean(true);
            jQuery('.small-logo').fadeIn('normal', function() { });
        }else if(position <250 && $scrolled == true){
            $scrolled = new Boolean(false);
            jQuery('.small-logo').fadeOut('normal', function() { });
        }
      }
    });

Answer 2

您可以使用以下jQuery函数来查找屏幕大小：

$(window).height();   // returns the height of browser window
$(window).width();   // returns the width of browser window

您可以在if语句中使用它，并且只有在屏幕宽度＆gt;处理时才运行您想要的内容。 768：

if ($(window).width > 768)
{
   //do magic here
}

Answer 3

检查窗口宽度是否适合您的脚本：

<script>
    var $scrolled = new Boolean(false);
    jQuery.noConflict();
    jQuery(window).scroll(function () {

        if ($(window).width() < 768)
            return false;

        position = jQuery(window).scrollTop();
        if(position >=250 && $scrolled == false){
            $scrolled = new Boolean(true);
            jQuery('.small-logo').fadeIn('normal', function() { });
        }else if(position <250 && $scrolled == true){
            $scrolled = new Boolean(false);
            jQuery('.small-logo').fadeOut('normal', function() { });
        }
    });
</script>

响应式jQuery脚本加载

3 个答案: