Question

<script>
   $().ready(function() {
        var $scrollingDiv = $("#scrollingDiv1");

        $(window).scroll(function(){            
            $scrollingDiv
                .stop()
                .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "fast" );          
        });
    });
</script>
<script>
   $().ready(function() {
        var $scrollingDiv = $("#scrollingDiv2");

        $(window).scroll(function(){            
            $scrollingDiv
                .stop()
                .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "fast" );          
        });
    });
</script>

//////

    <div id="scrollingDiv1" style="display:inline-block;float:left;">
    </div>
    <div id="scrollingDiv2" style="display:inline-block;float:right;">
    </div>
    <div id="foodInfo" style="display:absolute;float:center;">
    </div>

嗨，scrollingDiv1，scrollingDiv2移动（滚动时保持视图中的元素）但是当我们滚动foodInfo时也移动。实际上foodInfo在scrollingDiv1，scrollingDiv2 div下，当这些移动foodInfo与其他移动时相同。我们设置display:absolute;但仍然移动我们如何做到这一点。如果这个解释仍然不够，我可以分享链接。谢谢。

Answer 1

你可以尝试下面的代码：

使用位置：为此固定。

#foodInfo{position:fixed;}

Answer 2

食物信息div可以定位为固定。

职位：固定;

如果这样做，则DIV保持在固定位置，其他DIVS在其下方滚动。这是固定标题菜单中常用的技术

滚动1 div时div关系应该留下来

2 个答案: