Question

有人可以查看下面的代码吗？

HTML：

<div id="wrap">
            <header>
                <div id="fixitattop">
                    <hr><h1>It's me</h1><hr>
                    <div id="nav">
                        <a href="#">Menu1</a> / <a href="#">Menu2</a>
                    </div>
                    <hr>  
                </div>  
            </header>

            <div class="main">
                <div class="project1"></div>
                <div class="project2"></div>
                <div class="project3"></div>
                <div class="project4"></div>
                <div class="project5"></div>
                <div class="project6"></div>
            </div>

            <footer>
                <p>

                </p>
            </footer>
        </div>

JS：

$(document).ready(function(){
    $(window).scroll(fixHeader);
    fixHeader();


});

function fixHeader (){
    var $fixit = $('#fixitattop');
    if($(window).scrollTop() > 100){
        $fixit.css({
            'position':'fixed',
            'top':'2px'

        });
    } else {
        $fixit.css({
            'position':'relative',
            'top':'auto'
        });
    }
}

我想在滚动时将fixitattop div及其子内容修复到顶部，但当position更改为“已修复”时，它会变得难看。有人能让我知道解决这个问题吗？

Answer 1

只需将宽度设置为#fixitattop，而不仅仅是max-width;我建议宽度：100％;并让max-width句柄将其限制为1000px;

Answer 2

试试这个：

$fixit.css({
    'position':'fixed',
    'top':'2px',
    'padding' : '0px',
    'width' : '100%'

});

您必须指定元素的宽度并删除填充，因为您不需要在顶部固定栏中。

Answer 3

对于固定元素，您必须假设其百分比大小基于窗口大小。因此，如果你想要整页，但最大宽度不超过1000像素，你必须这样告诉他：

#fixitattop {
    position : relative;
    width: 100%; /*IMPORTANT*/
    max-width: 1000px; /*IMPORTANT*/
    margin: 0 auto;
    padding: 20% 10%;
}

jsFiddle

抱歉英语不好。

Answer 4

滚动时，只需在width: 80%;中添加script即可。是的80%，为什么不100%？因为在css中，您只需将#fixitattop填充设置为20% 10%，将20%设置为top，将20%设置为{{} 1}}，bottom和10% left。好的唯一问题是10% right和left，因为您只需要更改right的{{1}}，这样您就可以进行数学计算了。 width。这是你的UPDATED FIDDLE btw。希望它有所帮助：）

jquery在滚动时修复顶部的div

4 个答案: