时间戳

首页 > 解决方案 > 侧边栏粘着 Javascript 代码？

javascript - 侧边栏粘着 Javascript 代码？

问题描述

function toggleSidebar()
{
    document.getElementById("navigation").classList.toggle('active');
}
*{
	margin: 0;
	padding: 0;
    color: white;
}

html,body
{
	height: 100%;
    overflow-x: hidden;
    background-color: black;
}
#container
{
	min-height: 100%;
	background-color: black;
}
#banner
{
    width: 100%;
    height: 200px;
    background-image: url(images/banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
#content
{
    width: 100%;
    height: 500px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-left: 100px;
	padding-bottom: 240px;
    background-color: black;
    margin: 10px;
}
#footer
{
	background-color: #333;
	position: relative;
	height: 340px;
	margin-top: -240px;
	clear: both;
}
/* CONDITIONALS */

/* BANNER */
#banner h1
{
    font-size: 108px;
    text-align: center;
    padding-top: 30px;
    font-family: 'Over the Rainbow', cursive;
}

/* NAVIGATION */
.sticky
{
    position: fixed;
    top: 0;
    width: 200px;
}
#navigation
{
    position: fixed;
    width: 200px;
    height: 100%;
    background-color: rgba(30, 61, 68, 0.7);
    left: -200px;
    transition: all 300ms linear;
    opacity: 70%;
}
#navigation.active
{
    left: 0px;   
}
#navigation ul li
{
    list-style: none;
    padding: 15px 10px;
    border-bottom: 1px solid white;
}
#navigation ul li a
{
    color: white;
}
#navigation .toggle-btn
{
    position: absolute;
    left: 220px;
    top: 10px;
}
#navigation .toggle-btn span
{
    display: block;
    width: 30px;
    height: 4px;
    background-color: white;
    margin: 5px 0px;
}

/* FOOTER */
.footer-top
{
    height: 300px;  
}
.newsletter
{
    height: 60px;
    width: 200px;
    margin-top: 10px;
}
.newsletter-btn
{
    height: 60px;
    width: 100px;
    background-color: aqua;
    border: none;
}




.footer-margin
{
    margin-top: 30px;   
}
.social-text
{
    font-size: 20px;
    float: right;
    padding-right: 200px;
    padding-top: 5px;
}
.social-text span
{
    color: transparent;
}
.social li
{
    list-style: none;
    margin: 10px 20px;
    text-align: left;
}
.social img
{
    border-radius: 10px;
    width: 30px;
    
}
.colors
{
    color: black;   
}
.copyright
{
    text-align: center;   
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Rainfall Template</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="styles.css" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Over+the+Rainbow" rel="stylesheet">
        <link rel="icon" href="icon.ico" type="image/x-icon"/>
        <script src="js/togglebtn.js"></script>
    </head>
    <body>
        <div id="container">
            <section id="banner">
                <h1>RainFall</h1>
            </section>
            <section id="navigations">
                <div id="navigation">
                    <div class="toggle-btn" onclick="toggleSidebar()">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <ul>
                        <li><a href="template.html">Home</a></li>
                        <li><a href="#">Percipitation</a></li>
                        <li><a href="#">Lightning</a></li>
                        <li><a href="#">Clouds</a></li>
                        <li><a href="#">Evaporation</a></li>
                        <li><a href="contact.html">Contact Us</a></li>
                    </ul>
                </div>
            </section>
            <section id="content">
                    
            </section>
        </div>
        <section id="footer">
            <div class="row footer-top">
                <div class="col-md text-center footer-margin">
                    <h4>Sign up for our weekly Newsletter!</h4>
                    <form>
                        <h4>Your E-Mail Address:</h4>
                        <input type="text" id="email-news" placeholder="email@domain.com" class="colors newsletter"><button type="button" class="newsletter-btn colors">SUBSCRIBE!</button>
                    </form>
                </div>
                <div class="col-md text-center footer-margin">
                    <h4>References</h4>
                    <h6>Template</h6>
                    <h6>Template</h6>
                    <h6>Template</h6>
                    <h6>Template</h6>
                    <h6>Template</h6>
                </div>
                <div class="col-md text-center footer-margin">
                    <ul class="social">
                        <li><img src="images/icon_facebook.png"><h6 class="social-text">Like Us on Facebook<span>.</span></h6></li>
                        <li><img src="images/icon_instagram.png"><h6 class="social-text">Like Us on Instagram</h6></li>
                        <li><img src="images/icon_twitter.png"><h6 class="social-text">Follow Us on Twitter<span>.</span></h6></li>
                        <li><img src="images/icon_linkedin.png"><h6 class="social-text">Visit our LinkedIn<span>......</span></h6></li>
                    </ul>
                </div>
            </div>
            <h4 class="copyright">Nerdo Development Copyright &copy; 2018; All Rights Reserved</h4>
        </section>
    </body>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</html>

我正在尝试使侧边栏具有粘性，并将其作为汉堡菜单，但问题是当我使位置变得粘性时，它会使 JS 停止正常运行。这是代码笔：

任何帮助都会很棒！谢谢！（我能说的不多，但由于大部分代码错误，我必须输入更多，所以我希望每个人都过得愉快！）

标签： javascripthtmlcss

解决方案

推荐阅读