Question

我正在为网站制作主题，并且我获得了播放HTML文件的权限。问题是我只熟悉CSS和HTML，但是当涉及到Javascript，JQuery等时，我是一个完整的菜鸟。遗憾的是，似乎我需要添加一些我想要的功能。

我想要一个像这样的菜单：https://www.planetside2.com/news

HTML基本上是这样的：

<div id="wrap">
 <div id="page-header">
  <div class="headerbar">
 </div>
</div>

里面有很多东西，但我希望容器足够

这是CSS：

#wrap {
    margin: 0 auto;
    width: 1024px;
}

.headerbar {
    background: url("{T_THEME_PATH}/images/headerbarbg.png") no-repeat ;
    background-position: center;
    width: 1054px;
    margin:0 -15px;
    margin-top:3px;
    height: 120px;
    position: relative;
    padding-top: 70px;
}

我已经检查了一些其他解决方案，但是，正如我所说，我是一个完整的脚本编写器，当我尝试将这些脚本应用于主题时，它们不起作用，很可能是因为有一些我应该改变的事情我不知道（当然除了课程和ID）。

我希望有人可以帮助我。

Answer 1

首先，您需要检测滚动和窗口调整大小

$(document).ready(function(){

    $(window).on("scroll resize", function(e){

        var elem = $(".headerbar");

        // check if your header is visible by subtracting
        // the top offset of your div from the scrolltop distance
        if ((elem.offset().top - $(window).scrollTop()) <= 0 && elem.css("position") !== "fixed") {
            console.log("not visible");
            elem.css({
                position:"fixed",
                "z-index":"9999",
                top:"0px"
            });
        // check if your header height is greater or equal to the scrolltop distance
        } else if (elem.height() >= $(window).scrollTop()) {
            console.log("visible");
            elem.css({
                position:"relative"
            });
        }

    });

})

这是一个简单的演示：JSFIDDLE

Answer 2

我之前在小提琴中做过的一件事只是检查一下这将有助于你划伤。

$(document).ready(function () {
    var top_fixed;
    if ($('#header-con').length > 0)
    {
        top_fixed = $('#header-con').offset().top;
    }
    $(window).scroll(function () {
        if ($('#header-con').length > 0)
        {
            $('#header-con').toggleClass('fixed', $(window).scrollTop() > top_fixed);

        }
    });
});

<强> DEMO

Answer 3

这个简短的jquery代码就是你所需要的。经过测试，并且正在我最近开发的网站上工作。

$(window).scroll(function() {
    if($(window).scrollTop() != 0) {
        $('#fixed-menu-top').css('position', 'fixed').fadeIn();
    } else {
        $('#fixed-menu-top').css('position', 'absolute').fadeOut();
    }
});

只需将您的ids #fixed-menu-top改为#wrap至ids或ypur标记中的任何{{1}}

See website

在进行一些滚动操作后，如何使div（菜单）固定定位？

3 个答案: