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>
感谢您的帮助！
答案 0 :(得分：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">☰</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>