Question

在以下情况下，我试图使我的“粘性”导航栏出现：

如果用户的窗口小于或等于615px
无论窗口大小如何，如果用户向下滚动页面

我无法同时满足这两种情况。这是我现在使用的代码，试图使两者同时起作用：

$(document).ready(function () {

    // run test on initial page load
    checkSize();

    // run test on resize of the window
    $(window).resize(checkSize);


    function checkSize() {
        // .sticky appears when CSS media query fires (this one fires at max-width: 615px)
        if ($(".col").css("width") == "100%") {
                $('.sticky').css("visibility", "visible");
                $('.sticky').css("opacity", "1");
                $('.sticky').css("display", "block");
        }
        // otherwise, make .sticky only appear when user scrolls down a bit
        else {
            $('.js-section-about').waypoint(function (direction) {
                if (direction == 'down') {
                    $('.sticky').css("visibility", "visible");
                    $('.sticky').css("opacity", "1");
                } else {
                    $('.sticky').css("opacity", "0");
                    $('.sticky').css("visibility", "hidden");
                }
            }, {
                offset: '35%'
            });
        }
    }
});

预期结果是粘性导航器在每种情况下均按预期运行。实际发生的事情是我的代码的行为与以前完全相同：粘性导航在默认情况下是不可见的，并在您向下滚动页面时显示。

我以前只使用嵌套的if / else语句（航路点之一），并且运行良好。现在，如果/ else语句不在那儿，它的行为就像我的父母一样。

总体来说，我对jQuery和Web设计是一个新手，但是在我看来，这种解决方案似乎应该可行。任何想法为什么不这样做？

Answer 1

我认为您对此太想了。为什么不通过普通媒体查询处理小尺寸案件呢？

<script>
$('.js-section-about').waypoint(function (direction) {
    if (direction == 'down') {
        $('.sticky').css("display", "block");
    } else {
        $('.sticky').css("display", "none");
    }
});
</script>
<style>
@media screen and (max-width: 615px) {
  #bun { visibility: visible; opacity: 1; display: block; }
}
</style>
<div class="sticky" id="bun"> Navigation Bar </div>

id会自动将CSS优先于类，但是还有其他方法可以做到这一点。

如何使HTML元素总是在小于特定窗口大小时出现，而仅在窗口较大时才出现？

1 个答案: