Question

我试图制作div＆＃34; button_tray＆＃34;滚动时粘到页面顶部。整个页面看起来像这样，这样你就可以更好地了解我想要做的事情：http://tinypic.com/r/n6cnte/8

当我将所需的一些代码粘贴到jsfiddle中时似乎正常工作：http://jsfiddle.net/5ADzD/641/

所以我真的不知道这是什么让它无效。

感谢帮助。

HTML：

<doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <link rel="stylesheet" href="<?php bloginfo(stylesheet_url)?>"/>
            <script type="text/javascript" src="sticky.js"></script>
        </head>
            <body>
                <div id="main_img"></div>

                <div id="button_tray">
                    Sample 1
                    Sample 2
                    Sample 3
                </div>

            <div id="content">

CSS的一部分：

#button_tray {
    width: 100%;
    height: 100px;
    background-color: #373737;
    line-height: 100px;
    color: orange;
    font-size: 22px;
    text-align: center;
}

#button_tray.sticky {
    position: fixed;
    top: 0px;
}

JS：

var $window = $(window);
            $stickyEl = $('#button_tray');
            var elTop = $stickyEl.offset().top;
            $window.scroll(function() {
                var windowTop = $window.scrollTop();
                $stickyEl.toggleClass('sticky', windowTop > elTop);
            });

Answer 1

Div标签从上到下堆叠在一起，没有CSS。

可能存在语法错误。我相信不是使用#button_tray，而是尝试使用.button_tray

滚动到div时，div不会粘到页面顶部的问题

1 个答案: