Question

好的交易是我有一个页面顶部横幅100％宽，500px高，低于内容区域，比如4000px高。在那个内容区域内有一个盒子（100乘100）我想以某种方式行事。当我向下滚动页面时，该框触及屏幕顶部，我希望它固定在顶部，直到我向上滚动，它在父容器的顶部变得不固定（所以它在哪里开始）。任何人都有任何例子或简单的修复????

编辑：

我发现这个解决方案我觉得可行，但我不知道我做错了什么：

    <script>

    var $window = $(window),
    $sticky = $('#contentSideIner'),
    elTop = $sticky.offset().top;

    $window.scroll(function() {
    $sticky.toggleClass('sticky', $window.scrollTop() > elTop);
    });

    </script>

（代码在html文档的头部）

#contentSide {
background: black;
margin: 10px;
float: right;
width: 300px;
}
#contentSideIner {
width: 280px;
height: 400px;
margin: 0 auto;
background: red;
}

.sticky {
position: fixed;
top: 0;
}

我知道这段代码是为#contentSideIner div添加一个类，.sticky {position：fixed;顶部：0; }。我在这里犯了一种脑死的错误吗？

这是jfiddel基本上是我的http://jsfiddle.net/07xe5tLf/

我使用的代码越来越多：

<!DOCTYPE HTML>
<html>
<head>
    <title>Project Website: full review pages</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />


    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script>

    var $window = $(window),
    $sticky = $('#contentSideIner'),
    elTop = $sticky.offset().top;

    $window.scroll(function() {
    $sticky.toggleClass('sticky', $window.scrollTop() > elTop);
    });

    </script>

    <link rel="stylesheet" href="css/stylesMainReveiw.css" />

    <style>
        #banner { background-image: url("images/Destiny_Banner.jpg"); }
        .playableOn {}
        .rateBox { background-image: url("img/rating/rating3-big.png");  background-size: 150px 150px; }
        #contentSide { height: 5100px; }
    </style>

</head>
<body class="landing">

    <!-- Header -->
        <header id="header">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Monthly Spotlight</a>
                    <ul>
                        <li><a href="reviewDestiny.html">Destiny</a></li>
                        <li><a href="reviewDiablo.html">Diablo III</a></li>
                        <li><a href="reviewShadow.html">Shadow Of Mordor</a></li>
                        <li><a href="reviewTheLastOfUs.html">The Last Of Us</a>
                        <li><a href="reviewBayonetta.html">Bayonetta 2</a></li>
                    </ul>
                </li>
                <li><a href="#">Older Reviews</a></li>
            </ul>
        </header>

    <!-- Banner -->
        <section id="banner">
            <h1>destiny</h1>
            <h2>"Same Quote for the game as seen in js-load"</h2>
                <div class="playableOn"><p>Playable On:</p></div>
                <div class="rateBox"></div>
        </section>

    <!-- Main -->
        <section id="main" class="container">
            <div id="contentSide">
                <div id="contentSideIner">
                </div>
            </div>

Answer 1

This is what it seems you want

你想要的是一个粘性菜单，它需要javascript在视口中找到页面的当前位置，并更改CSS或类以使其固定。这是一个不好的例子，因为滚动后没有div可见，并且固定元素以防止下面的页面内容填充菜单栏所在的位置。这可以通过使用jQuery使这个隐藏的div可见来完成。如果您需要代码，请询问。

它被称为粘性菜单，我总是忘记它的名称。：）

我记得通常会花一些时间专门搜索我想要的内容，直到找到它为止。不要将StackOverflow作为默认goto以获得帮助，因为这是你被禁止的方式。您需要具体并提供JSFiddle之类的代码，或者花一些时间制作一个可视化示例或找到一个能够满足您需求的网站。像Facebook这样的很多网站都使用这种技术而且很常见。如果这没有意义，那么你应该去W3Schools并阅读一些Javascript和CSS，并在jQuery上找到一些教程。

对于你的小提琴，你需要在脑中包含jQuery：http://jsfiddle.net/b2550/07xe5tLf/1/

我JSFiddle它就像在侧边栏和代码中使用你的框架一样简单，你需要将它包含在脑中（正如我在评论中所述）

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

在容器内修复div

1 个答案: