Javascript 如何使用垂直滚动条滚动div_Javascript_Jquery_Html

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

javascript jquery html

Javascript 如何使用垂直滚动条滚动div,javascript,jquery,html,Javascript,Jquery,Html,滚动垂直条时，如何将幻灯片div放在页面的右上方这是我的代码 CSS <style> body { width:100%; overflow-x:hidden; margin:0; } #slide { background:r

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

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>


身体{
宽度：100%；
溢出x：隐藏；
保证金：0；
}
#滑梯{
背景：rgba（0,0,0,0.4）；
宽度：200px；
浮动：对；
右边距：-180px；
}
p{
颜色：红色；
保证金：5px；
光标：指针；
浮动：对；
最小高度：200%；
}
p:悬停{
背景：黄色；
}

这是我的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>


Jscript动画示例

家
关于
接触

第一段
第二段
还有一段

我的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>


var菜单=0；
$（“#幻灯片”）。单击（函数（）{
如果（菜单==0）{
菜单=1；
$（此）。设置动画(
{marginRight:'0px'}，200
);
}否则{
菜单=0；
$（此）。设置动画(
{marginRight:'-180px'}，200
);
}
});

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

您是否尝试为其指定固定位置和顶部，右坐标？

试试这个

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

你可以在

上检查它，我已经尝试过了，但是没有修复，但是由于修复，我无法使用onclick事件为div设置动画。你应该在容器宽度而不是边距上设置动画：$（this）。animate（{width:'200px'}）//显示$（this）。animate（{width:'10px'}//隐藏大部分内容，只留下它在那里的标志