博客

CSS 侧边滑动栏 (大概叫这个吧…)

  • Post author:
  • Post category:其他






CSS 侧边滑动栏



(大概叫这个吧…)



介绍：

如果你想在网页的侧边加入滚动条。那你来对地方了。在下面的教程中，我将展示如何使用

HTML、JavaScript 和 CSS 来制作。



HTML 部分


index.html

首先肯定是要连 CSS 和 JS 的。

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side Bar</title>
</head>

<body>
    <script src="srcoll.js"></script>
</body>

</html>

然后加上div（main 是内容 sb 是侧边栏） 

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side Bar</title>
</head>

<body>
    <div id="sb"></div>
    <div class="main"></div>
    <script src="srcoll.js"></script>
</body>

</html>

在Body里写入 οnscrοll=“sc()” 这样在滑动是就会执行function sc了(当然，你可以写在javascript里) 

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side Bar</title>
</head>

<body onscroll="sc()">
    <div id="sb"></div>
    <div class="main"></div>
    <script src="srcoll.js"></script>
</body>

</html>



CSS 部分

style.css

随便写点吧

* {
    user-select: none;
}

body {
    background-color: #000;
}

#sb {
    position: fixed;
    top: 350px;
    right: -150px; /*找个看不见他的地方*/
    height: 240px;
    width: 60px;
    background-color: white;
    border-radius: 50px;
    transition: 0.3s; /*这个可以用 0.3秒 来滑动。*/
}

.main {
    width: 100%;
    height: 500vh;
}



JS 部分


srcoll.js

首先写一个function叫 sc

function sc() {



}

然后写如果滑动条位置大于 n ( n 为数字 ) 

function sc() {
    if (document.documentElement.scrollTop >= n) {
        
        } 
}

执行将滑动条的位置移出来，而小过n的话再移回去。 

function sc() {
    if (document.documentElement.scrollTop >= 500) {
        document.getElementById('sb').style.right = '50px'
    } else { document.getElementById('sb').style.right = '-150px' } 
    //right可以改成left，或者任何地方。当然CSS 也要改，不然就像是飞过去一样
}



完整代码

index.html

srcoll.js

style.css



index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side Bar</title>
</head>

<body onscroll="sc()">
    <div id="sb"></div>
    <div class="main"></div>
    <script src="srcoll.js"></script>
</body>

</html>


scroll.js
function sc() {
    if (document.documentElement.scrollTop >= 500) {
        document.getElementById('sb').style.right = '50px'
    } else { document.getElementById('sb').style.right = '-150px' }
}


style.css
* {
    user-select: none;
}

body {
    background-color: #000;
}

#sb {
    position: fixed;
    top: 350px;
    right: -150px;
    height: 240px;
    width: 60px;
    background-color: white;
    border-radius: 50px;
    transition: 0.354s;
}

.main {
    width: 100%;
    height: 500vh;
}


整个html档案
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        * {
            user-select: none;
        }
        
        body {
            background-color: #000;
        }
        
        #sb {
            position: fixed;
            top: 350px;
            right: -150px;
            height: 240px;
            width: 60px;
            background-color: white;
            border-radius: 50px;
            transition: 0.354s;
        }
        
        .main {
            width: 100%;
            height: 500vh;
        }
    </style>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side Bar</title>
</head>

<body onscroll="sc()">
    <div id="sb"></div>
    <div class="main"></div>
    <script>
        function sc() {
            if (document.documentElement.scrollTop >= 500) {
                document.getElementById('sb').style.right = '50px'
            } else {
                document.getElementById('sb').style.right = '-150px'
            }
        }
    </script>
</body>

</html>

就这，没了。拜。


版权声明：本文为yenoxin原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。