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">☰</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;"> </td></tr>
</table>
</div>
</body>
</html>谢谢你的帮助！
最佳答案
您可以使用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">☰</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;"> </td>
</tr>
</table>
</div>