可移动侧导航栏

Question

enter code here我目前正在尝试建立一个网页。左侧是一个带有快速链接的小导航栏。 （登录并推荐相关博客等）。

目前导航栏是静态的。但我想让它可移动，这样用户就可以将它拖放到任何他想要的位置。

我的 javascript 知识目前还不是很好（正在努力！），有人可以帮我制作那种效果吗？

$(document).ready(function(){       
       var scroll_start = 0;
       var startchange = $('nav');
       var offset = startchange.offset();
       $(document).scroll(function() { 
          scroll_start = $(this).scrollTop();
          if(scroll_start > offset.top) {
              $('nav').css('background-color', 'rgba(51,51,51,0.8)');
           } else {
              $('nav').css('background-color', 'rgba(51,51,51,1)');
           }
       });
    });
    
    $('ul').draggable()

/******************************************* MAIN */
    html {
    	height: 100%;
    }
    body {
    	margin: 0px;
    	padding: 0px;
    	height: 100%;
    }
    h3,h4,h5,h6,p {
    	font-family:Arial,sans-serif;
    	color:#333333;
    	margin:0px;
    	padding:0px;
    	font-weight:100;
    	
    }
    h1 {
    	font-family:'Khand',sans-serif;
    	font-size:43px;
    	font-weight:100;
    	margin:0px;
    	padding:0px;
    }
    h2 {
    	font-family:'Khand',sans-serif;
    	font-size:35px;
    	font-weight:100;
    	line-height:40px;
    	margin:0px;
    	padding:0px;
    }
    h3 {
    	font-size:18px;
    	line-height:25px;
    }
    p {
    	font-size:18px;
    	line-height:25px;
    }
    a {
    	font-family:Arial,sans-serif;
    	color:#db091a;
    	text-decoration:none;
    }
    img {
    	display:inline-block;
    }
    /************************************************************** BUTTON*/
    button.default {
    	border-radius:0px;
    	background:transparent;
    	border-style: solid;
    	border-width: 2px;
    	border-color: #356651;
    	color:#222;
    	font-size:20px;
    	font-family:'Khand',sans-serif;
    	padding:5px 20px;
    }
    /*************************************** CLASSES */
    .container {
    	width:80%;
    	margin: 0 auto;
    }
    
    /*********************************** MAIN NAV*/
    nav{
    	background:#333;
    	top:0px;
    	position:fixed;
    	width:100%;
    	height:50px;
    	padding-top:20px;
    	text-align:right;
    	z-index:3;
    }
    nav ul {
        list-style-type: none;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
    }
    nav li {
        display: inline;
        float: right;
    }
    nav li a {
        display: block;
        color: #fff;
        font-family: 'Khand', sans-serif;
        font-size:24px;
        text-align: center;
        padding: 3px 22px;
        text-decoration: none;
    }
    nav img {
    	height:8px;
    }
    nav #menu-icon {
    	color:#fff;
    	font-size:30px;
    	float:right;
    	display:none;
    }
    
    /*MOBILE NAV*/
    @media only screen and (max-width : 700px) {
    	nav #menu-icon {
    		display:inline-block;
    	}
    	nav ul, nav:active ul { 
    		display: none;
    		position: absolute;
    		padding: 0px;
    		right: 0px;
    		top: 60px;
    		width: 100%;
    		background: #999;
    	}
    	nav:hover ul {
    		display: block;	
    	}
    	nav li {
    		text-align: center;
    		width: 100%;
    		padding: 0px 0;
    		margin: 0;
    	}
    }
    
    /**********************************QUICKLINKS*/
    #quicklinks ul {
    	list-style-type: none;
        margin: auto 0;
        padding: 0;
        position:fixed;
        top:50%;
        background:#db091a;
        box-shadow: 2px 2px 5px #333333;
    }
    #quicklinks ul li:not(.not) {
        border-bottom: 1px solid #e45c4b;
    }
    #quicklinks ul img {
    	display:block;
    	padding: 10px 12px;
    }
    
    /*********************************CONTENT BOX 1*/
    #cb_1 {
    	background-image: url("images/bg_2.jpg"); 
    	height:100%;
    	margin:0px;
    	padding:0px;
    	z-index:-1;
    }
    #cb_1 h1 {
    	color:#222;
    	padding-top: 20px;
    }
    #cb_1 h3 {
    	color:#356651;
    }
    #cb_1 p {
    	color:#222;
    	padding-top: 30px;
    	padding-bottom:40px;
    }
    #cb_1 article {
    	background: rgba(255,255,255,0.6);
    	width:45%;
    	padding:50px 50px;
    	position:absolute;
    	top:100px;
    }
    /*MOBILE BOX*/
    @media only screen and (max-width : 700px) {
    	#cb_1 article {
    	width:100%;
    	}
    }
    /*********************************CONTENT BOX 2*/
    #cb_2 h1 {
    	color:#333;
    	padding-top: 20px;
    	text-align:center;
    }
    #cb_2 h2 {
    	color:#db091a;
    	padding-top: 10px;
    	text-align:center;
    }

<!DOCTYPE HTML>
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    	
    	<title>This is a test</title>
    	
    	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    	<link href="https://fonts.googleapis.com/css?family=Khand" rel="stylesheet"> 
    	
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    	<script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
    
    <nav id="menu">
    	<div class="container">
    		<a href="#" id="menu-icon">&#9776;</a>
    		<ul>
    			<li><a href="#"><img src="images/pixel.png"> Lorem</a></li>
    			<li><a href="#"><img src="images/pixel.png"> Ipsum</a></li>
    			<li><a href="#"><img src="images/pixel.png"> Dolor</a></li>
    			<li><a href="#"><img src="images/pixel.png"> Consetetur</a></li>
    		</ul>
    	</div>
    </nav>
    
    <aside id="quicklinks">
    	<ul>
    		<li><a href="#" title="Login" class="wrapper"><img src="glyphicon/user.png" ></a></li>
    		<li><a href="#" title="Tester" class="wrapper"><img src="glyphicon/user.png" ></a></li>
    		<li class="not"><a href="#" title="Kontakt" class="wrapper"><img src="glyphicon/user.png" ></a></li>
    	</ul>
    </aside>
    
    <section id="cb_1">
    	<div class="container">
    		<article>
    			<h1>Lorem ipsum dolor sit amet</h1>
    			<h3>
    				At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
    				takimata sanctus est Lorem ipsum dolor sit amet.
    			</h3>
    			<p>
    				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
    				eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
    				At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
    				takimata sanctus est Lorem ipsum dolor sit amet.
    			</p>
    			<button type="button" class="default">Stet clita kasd</button> 
    		</article>
    	</div>
    </section>
    
    <section id="cb_2">
    	<div class="container">
    		<article>
    			<h1>Lorem ipsum dolor sit amet</h1>
    			<h2>
    				At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
    				takimata sanctus est Lorem ipsum dolor sit amet.
    			</h2>
    		</article>
    	</div>
    </section>
    
    <div>
    <table>
    <tr><td style="height:1000px;">&nbsp;</td></tr>
    </table>
    </div>
    
    
    
    </body>
    </html>

感谢您的帮助！

Answer 1

您可以使用 jQuery UI。它需要与 jQuery 一起加载。然后你可以使用$('ul').draggable()。

$(document).ready(function() {
  var scroll_start = 0;
  var startchange = $('nav');
  var offset = startchange.offset();
  $(document).scroll(function() {
    scroll_start = $(this).scrollTop();
    if (scroll_start > offset.top) {
      $('nav').css('background-color', 'rgba(51,51,51,0.8)');
    } else {
      $('nav').css('background-color', 'rgba(51,51,51,1)');
    }
  });
  $('ul').draggable()

});

/*************************************************************** MAIN */

html {
  height: 100%;
}

body {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

h3,
h4,
h5,
h6,
p {
  font-family: Arial, sans-serif;
  color: #333333;
  margin: 0px;
  padding: 0px;
  font-weight: 100;
}

h1 {
  font-family: 'Khand', sans-serif;
  font-size: 43px;
  font-weight: 100;
  margin: 0px;
  padding: 0px;
}

h2 {
  font-family: 'Khand', sans-serif;
  font-size: 35px;
  font-weight: 100;
  line-height: 40px;
  margin: 0px;
  padding: 0px;
}

h3 {
  font-size: 18px;
  line-height: 25px;
}

p {
  font-size: 18px;
  line-height: 25px;
}

a {
  font-family: Arial, sans-serif;
  color: #db091a;
  text-decoration: none;
}

img {
  display: inline-block;
}


/************************************************************** BUTTON*/

button.default {
  border-radius: 0px;
  background: transparent;
  border-style: solid;
  border-width: 2px;
  border-color: #356651;
  color: #222;
  font-size: 20px;
  font-family: 'Khand', sans-serif;
  padding: 5px 20px;
}


/************************************************************ CLASSES */

.container {
  width: 80%;
  margin: 0 auto;
}


/************************************************************ MAIN NAV*/

nav {
  background: #333;
  top: 0px;
  position: fixed;
  width: 100%;
  height: 50px;
  padding-top: 20px;
  text-align: right;
  z-index: 3;
}

nav ul {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

nav li {
  display: inline;
  float: right;
}

nav li a {
  display: block;
  color: #fff;
  font-family: 'Khand', sans-serif;
  font-size: 24px;
  text-align: center;
  padding: 3px 22px;
  text-decoration: none;
}

nav img {
  height: 8px;
}

nav #menu-icon {
  color: #fff;
  font-size: 30px;
  float: right;
  display: none;
}


/*MOBILE NAV*/

@media only screen and (max-width: 700px) {
  nav #menu-icon {
    display: inline-block;
  }
  nav ul,
  nav:active ul {
    display: none;
    position: absolute;
    padding: 0px;
    right: 0px;
    top: 60px;
    width: 100%;
    background: #999;
  }
  nav:hover ul {
    display: block;
  }
  nav li {
    text-align: center;
    width: 100%;
    padding: 0px 0;
    margin: 0;
  }
}


/***********************************************************QUICKLINKS*/

#quicklinks ul {
  list-style-type: none;
  margin: auto 0;
  padding: 0;
  position: fixed;
  top: 50%;
  background: #db091a;
  box-shadow: 2px 2px 5px #333333;
  z-index: 100;
}

#quicklinks ul li:not(.not) {
  border-bottom: 1px solid #e45c4b;
}

#quicklinks ul img {
  display: block;
  padding: 10px 12px;
}


/********************************************************CONTENT BOX 1*/

#cb_1 {
  background-image: url("images/bg_2.jpg");
  height: 100%;
  margin: 0px;
  padding: 0px;
  z-index: -1;
}

#cb_1 h1 {
  color: #222;
  padding-top: 20px;
}

#cb_1 h3 {
  color: #356651;
}

#cb_1 p {
  color: #222;
  padding-top: 30px;
  padding-bottom: 40px;
}

#cb_1 article {
  background: rgba(255, 255, 255, 0.6);
  width: 45%;
  padding: 50px 50px;
  position: absolute;
  top: 100px;
}


/*MOBILE BOX*/

@media only screen and (max-width: 700px) {
  #cb_1 article {
    width: 100%;
  }
}


/********************************************************CONTENT BOX 2*/

#cb_2 h1 {
  color: #333;
  padding-top: 20px;
  text-align: center;
}

#cb_2 h2 {
  color: #db091a;
  padding-top: 10px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

  <nav id="menu">
    <div class="container">
      <a href="#" id="menu-icon">&#9776;</a>
      <ul>
        <li>
          <a href="#"><img src="images/pixel.png"> Lorem</a>
        </li>
        <li>
          <a href="#"><img src="images/pixel.png"> Ipsum</a>
        </li>
        <li>
          <a href="#"><img src="images/pixel.png"> Dolor</a>
        </li>
        <li>
          <a href="#"><img src="images/pixel.png"> Consetetur</a>
        </li>
      </ul>
    </div>
  </nav>

  <aside id="quicklinks">
    <ul>
      <li>
        <a href="#" title="Login" class="wrapper"><img src="glyphicon/user.png"></a>
      </li>
      <li>
        <a href="#" title="Tester" class="wrapper"><img src="glyphicon/user.png"></a>
      </li>
      <li class="not">
        <a href="#" title="Kontakt" class="wrapper"><img src="glyphicon/user.png"></a>
      </li>
    </ul>
  </aside>

  <section id="cb_1">
    <div class="container">
      <article>
        <h1>Lorem ipsum dolor sit amet</h1>
        <h3>
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </h3>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
          sanctus est Lorem ipsum dolor sit amet.
        </p>
        <button type="button" class="default">Stet clita kasd</button>
      </article>
    </div>
  </section>

  <section id="cb_2">
    <div class="container">
      <article>
        <h1>Lorem ipsum dolor sit amet</h1>
        <h2>
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </h2>
      </article>
    </div>
  </section>

  <div>
    <table>
      <tr>
        <td style="height:1000px;">&nbsp;</td>
      </tr>
    </table>
  </div>