jquery - 在 JQuery 中检查视口

Question

我有一个导航栏，可以在页面上下移动时调整大小。在页面顶部，它不应该缩小，但确实会缩小。我需要检查用户是否位于页面顶部并且不缩小导航栏。这是代码：

<script type="text/javascript">
     $('#brand_logo').on('inview mouseenter', function(event, visible) {
    if (visible === true) {
         console.log("I got my eye on it Charlie");
        $("#topnav").animate({
            opacity: 1.0,
            width: '98%',
            height: '38px'
        });
        // $(".head-wrap-left").hide();
    } else {
         console.log("Let's set the mood.");

        $("#topnav").animate({
            opacity: 0.9, //0.6 original
              width: '310px',
              height: '33px'

        });
        $("#topnav_behind").slideUp();

        $('#topnav').bind({
                    mouseenter: function() {
                        $("#topnav").animate({opacity: 1.0, width: '98%', height: '38px'});
                    },
                    mouseleave: function() {
                           $("#topnav").animate({opacity: 0.9, width: '310px', height: '33px'});
                    }
                    });
        }});


</script>

Answer 1

可能重复：https ://stackoverflow.com/a/473010/1250044

$.extend($.expr[':'], {
    inView: function(a) {
        var st = (document.documentElement.scrollTop || document.body.scrollTop),
            ot = $(a).offset().top,
            wh = (window.innerHeight && window.innerHeight < $(window).height()) ? window.innerHeight : $(window).height();
        return ot > st && ($(a).height() + ot) < (st + wh);
    }
});