相关疑难解决方法(0)

我的页面结构如下:

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

现在,child-leftDIV将拥有更多内容,因此parentDIV的高度会根据孩子的DIV而增加.

但问题是child-right身高并没有增加.我怎样才能使它的高度等于它的父母？

我在网站上有一个粘性标题.但是当视口底部下方有一个非常特定数量的内容(大约等于我的html上的2-3x padding-top)时,如果试图慢慢滚动,则滚动会上下振动.如果页面下方有大量内容,则效果很好.

编辑:对不起,如果我的原始问题不够清楚,但我希望整个页面滚动,直到'标题'到达屏幕顶部,然后(并且只有那时)让标题停止滚动,而页面的其余内容继续滚动它.

这是一个JSfiddle

$(function () {
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#stickyheader').offset().top;

    $(window).scroll(function () {
        if ($(window).scrollTop() > stickyHeaderTop) {
            $('#stickyheader').css({
                position: 'fixed',
                top: '0px'
            });
            $('#othercontent').css('margin-top', $('#stickyheader').outerHeight(true));
        } else {
            $('#stickyheader').css({
                position: 'static',
                top: '0px'
            });
            $('#othercontent').css('margin-top', '0px');
        }
    });
});

body {
    font: 13px sans-serif;
    padding-top: 20px;
}
#stickyheader {
    width: 100%;
    height: 40px;
    background:black;
    color:white;
    margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stickyheader">Sticky header</div>
<div id="othercontent">
<p>Lorem ipsum dolor …

有没有办法根据滚动位置框架内容; 每当用户滚过某个标记点时,页面被推(锁定)到某个位置(幻灯片),引导用户查看该幻灯片上的内容(该页面基于https://github.com/richardshepherd/Parallax - 滚动/).将有多个标记点,因此引导用户查看幻灯片上的内容.

我使用下面的jQuery(由James Montagne回答)在用户向下滚动250px后开始固定位置滚动,以便元素保持固定在浏览器的顶部.

$(window).scroll(function(){
    $("#theFixed").css("top",Math.max(0,250-$(this).scrollTop()));
});

问题:另外,当滚动固定位置元素的底部到达父div元素的末尾时,我想停止固定位置滚动.这样可以防止固定位置元素溢出父元素并获得截止.

我的示例代码在这里:http://jsfiddle.net/b43hj/2020/

<div>
    <div id="theFixed" style="position: fixed; top: 250px; background-color: red">
        0 SOMETHING<br />
        1 SOMETHING<br />
        2 SOMETHING<br />
        3 SOMETHING<br />
        4 SOMETHING<br />
        5 SOMETHING<br />
        6 SOMETHING<br />
        7 SOMETHING<br />
        8 SOMETHING<br />
        9 SOMETHING<br />
        10 SOMETHING<br />
        11 SOMETHING<br />
        12 SOMETHING<br />
        13 SOMETHING<br />
        14 SOMETHING<br />
        15 SOMETHING<br />
        16 SOMETHING<br />
        17 SOMETHING<br />
        18 SOMETHING<br />
        19 SOMETHING<br />
        20 …

我不知道在哪里发布这个问题,所以如果我违反任何政策,请原谅.

为了澄清我的问题,我想要实现与Teehan + Lax相同的导航栏.

这是他们的网站:http://www.teehanlax.com/tools/

如果您注意到,向下滚动时导航会自动隐藏,但是当您向上滚动时,它会再次显示自己.

所以我的问题是,他们是如何实现这一目标的？是仅通过CSS还是我需要JavaScript来执行此操作？无论它是什么方式,有人也可以指出如何找到实现这一点的信息的正确方向？

谢谢