Question

求下面菜单的样式，随滚动条向下移动

https://www.4008-517-517.cn/cn/browse/menu.html，跟麦乐送的正餐菜单一样，随着滚动条移动，求html和css样式

Answer 1

<style>
.demo2 {    margin-top: 10px;    text-align: left;    width: 280px;}
.demo1 {    position: fixed;    top: 10px;    width: 280px;}
</style>

 <script type="text/javascript">
        jq(document).ready(function(){
            var loaded = true;
            var top = jq("#demo").offset().top;
            function Add_Data()
            {              
                var scrolla=jq(window).scrollTop();
                var cha=parseInt(top)-parseInt( scrolla);
                if(loaded && cha<=0)
                {                
                    jq("#demo").removeClass("demo2").addClass("demo1");
                    loaded=false;
                }
                if(!loaded && cha>0)
                {
                    jq("#demo").removeClass("demo1").addClass("demo2");
                    loaded=true;
                }
            }
            jq(window).scroll(Add_Data);
        });
    </script>

<div id="demo" class="demo2">1111</div>

追问

请问demo1在哪？

追答

在js里啊。当浏览器不超出屏幕高度时使用.demo2属性，当下拉超出屏幕高度时，.demo2会自动变成.demo1，即固定位置跟随滚动。

追问

再麻烦一下啊，等下我加分，请问js和css都是放在head中间吗？我放了没反应，麻烦你了

追答

我的网站就在用，怎么可能没有反应。。

追问

是不是用了jQuery啊，我还没学。。这是实训周要求做SSH框架的网站，我只会后台，界面最不会了。。，用jQuery要导入什么吗

追答

哦，忘记了jq库。

给你个压缩包吧。