0

我对创建网站有点陌生，所以请耐心等待。

我刚刚开始了一个新项目，我想要一个在滚动时跟随的菜单，然后在到达页面顶部时停止。我发现了一个非常酷的 JavaScript 插件，名为"StickyPanel"( https://code.google.com/p/sticky-panel/ )，但它不会合作。显然没有说明，我在其他地方找不到任何有用的信息。

代码非常简单：

<script src="js/jquery.js"></script>
<script src="js/jquery.stickyPanel.min.js"></script>

<!-----Sticky Panel------>

<script type="text/javascript">
        $().ready(function () {

            var stickyPanelOptions = {
                afterDetachCSSClass: "",
                savePanelSpace: true
            };
            $("header").stickyPanel(stickyPanelOptions);
        });
    </script>

    <script>
        $(document).ready(function(){
            $(".nav-button").click(function () {
            $(".nav-button,.menu").toggleClass("open");
            });    
        });
    </script>

<!-----Sticky Panel------>

然后我创建了一个div名为“header”的类，然后设置了 header-menu 的样式。我无法让 JavaScript 对我的标题做任何事情。我究竟做错了什么？

4

3 回答 3

1 
        $("header").stickyPanel(stickyPanelOptions);

您向 Jquery 询问 elemet 标头 您需要向 jquery 询问类标头 =>

        $(".header").stickyPanel(stickyPanelOptions);

阅读有关它有用的选择器！

        <header> is a html5 element, support by almost all browser but dont forget display: block in css!
于 2013-03-11T15:21:53.407 回答
0

$(".header")使用而不是选择您的 div$("header")

于 2013-03-11T15:24:04.297 回答
0

如果您不想使用此插件，还有另一种方法。在互联网的某个地方找到了这段代码。它使用position:fixedcss风格，简单的js

javascript

<script type="text/javascript">
    window.onload = function () { 
    $(window).scroll(function () {
    var e = $("#StickyPanel"); 
    if (document.documentElement.scrollTop >= 602 || window.pageYOffset >= 602) { 
    if ($.browser.msie && $.browser.version == "6.0") 
    { 
    e.css("top", document.documentElement.scrollTop + 15 + "px") } 
    else { 
    e.css({ position: "fixed", top: "1%" }) } } 
    else if (document.documentElement.scrollTop < 602 || window.pageYOffset < 602) 
    {            
     e.css({ position: "absolute", top: "91%" }) } }) }
     </script>

css

#search
{
  position: absolute;
  top: 91%;
 }

只需更改值

602

根据您的需要

希望能帮助到你。

这就是您所要求的： JSFIDDLE jsfiddle 演示

于 2013-03-11T15:30:18.267 回答