Question

我有div-1，我想只在div-2滚动到顶部时显示。这是代码：

CSS

.none {display: none;}

的jQuery

var distance = $('header').offset().top,
$window = $(window);
$window.scroll(function() {
if ( $window.scrollTop() >= distance ) {
        $("#logo-menu").removeClass("none").addClass("animated fadeInLeft");
    } else {
        $("#logo-menu").addClass("none");
    }
});

它工作正常。另外，我还想仅为宽度＆gt;显示div-1。 900px，但我不能让它工作。我试过这个：

if ( $window.scrollTop() >= distance ) && ($(window).width() > 960) {...}

但div-1在页面加载时显示，即使div-2没有滚动到顶部而且无论屏幕宽度如何。我做错了什么？

Answer 1

只需保留您的javascript代码并在CSS中使用媒体查询即可。然后要明智地说明您使用javascript添加哪些类，以便它们不会覆盖媒体查询。

#div-1 { display: none; }

@media (min-width: 900px;) {

    #div-1 { display: block;  }

}

但除此之外，在你在问题中发布的javascript中，这个

if ( $window.scrollTop() >= distance ) && ($(window).width() > 960) {...}

应该是这样的：

if ( $window.scrollTop() >= distance && $(window).width() > 960) {...}

您的括号位于错误的位置。

两个if语句（检查宽度和滚动）不起作用

1 个答案: