繁体   English   中英

如何使用垂直滚动条滚动div

[英]How to scroll div with vertical scroll bar

滚动垂直栏时如何将幻灯片div放在页面的右上角这是Css我的代码

的CSS

    <style>
              body {
                    width:100%;
                    overflow-x:hidden;
                    margin:0;
                }

              #slide {
                    background:rgba(0,0,0,0.4);
                    width: 200px;
                    float: right;
                    margin-right: -180px;

                }
              p {
                color: red;
                margin: 5px;
                cursor: pointer;
                float: right;   
                min-height: 200%;        
              }
              p:hover {
                background: yellow;
              }
</style>

这是我的HTML代码HTML

<body>
     <b>Jscript Animate Example</b>
     <div id="slide">

            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Contact</li>
            </ul>
        </div>

        <p>First Paragraph</p>
        <p>Second Paragraph</p>
        <p>Yet one more Paragraph</p>
</body>

我的Jquery代码Jquery

<script>

             var menu = 0;
            $("#slide").click(function() {

                if (menu == 0) {
                    menu = 1;
                    $(this).animate(
                        {marginRight: '0px'},200
                    );
                } else {
                    menu = 0;
                    $(this).animate(
                        {marginRight: '-180px'},200
                    );
                }

            });
</script>

但是当我向下滚动时,它在顶部移动。即使向下滚动,也如何将其固定在顶部。

您是否尝试过给它固定的位置以及上,右坐标?

尝试这个

    #slide {
    background:rgba(0,0,0,0.4);
    width: 200px;
    top: 0;
    right: 0;
    border: 1px solid #000000;
    position: absolute;
    }

您可以在http://jsfiddle.net/jU5YW/上进行检查

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM