gpt4 book ai didi

jquery - 移动 使我无法滚动

转载 作者:太空宇宙 更新时间:2023-11-04 11:24:21 25 4
gpt4 key购买 nike

我刚刚通过移动整个 <body> 在我的网页左侧插入了打开菜单栏的可能性。 .出现和消失都很好。但即使隐藏了菜单栏,也无法再向下滚动网页。

HTML:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JFP</title>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="/static/main.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/static/app.js"></script>
</head>
<body>
<div id="body-wrapper">
<div class="menu">
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="container-fluid">
<div class="header">
<div class="row">
<div class="col-md-1 text-center">
<div class="icon-menu">
<i class="fa fa-bars"></i>
</div>
</div>
<div class="col-md-10 text-center">
<li><a>!</a></li>
</div>
<div class="col-md-1 text-center"></div>
</ul>
</div>
</div>
</div>
<div class="jumbo">
<div class="container">
<div class="col">
<div class="col-md-6 text-center">
<div class="een">
<img id="een" src="https://s3.amazonaws.com/codecademy-content/projects/broadway/design.svg" class="img-responsive center-block">
<img id="eeneen" src="http://s.petrolicious.com/2015/vintage-friday/08-aug/paris/paris-6.jpg" class="img-responsive center-block" style="display:none">
<div class="texteen text center" style="display:none">
<h1>Lorem ipsum.</h1>
</div>
</div>
</div>
<div class="col-md-6 text-center">
<div class="twee">
<h1>π</h1>
<div class="tweetwee" style="display:none">
<h2>Lorem ipsum.</h2>
</div>
</div>
</div>
</div>
<div class="col">
<div class="col-md-6">
<div class="drie">
<img id="drie" src="https://s3.amazonaws.com/codecademy-content/projects/broadway/design.svg" class="img-responsive center-block">
<div class="driedrie" style="display:none">
<h1>If you can see this: thanks!</h1>
</div>
</div>
</div>
<div class="col-md-6 text-center">
<div class="vier">
<img id="vier" src="https://s3.amazonaws.com/codecademy-content/projects/broadway/design.svg" class="img-responsive center-block">
<img id="viervier" src="http://thumbs.werkaandemuur.nl/6e8e65e8613d92882d69d582572a2f5b_950x600_fit.jpg" class="img-responsive center-block" style="display:none">
<div class="textvier text center" style="display:none">
<h1>If you can see this: thanks!</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="supporting">
<div class="container">
<div class="col">
<h1>If you can see this: thanks!</h1>
<a href="#">If you can see this: thanks!</a>
</div>
<div class="col">
<img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/develop.svg">
<h2>If you can see this: thanks!</h2>
<p></p>
<a href="#">If you can see this: thanks!</a>
</div>
<div class="col">
<img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/deploy.svg">
<h2>If you can see this: thanks!</h2>
<p></p>
<a href="#">If you can see this: thanks!</a>
</div>
</div>
</div>
</div>
</body>

</html>

CSS:

html {}

body{
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}

.menu {
background-color: rgb(50,50,50);
left: -185px;
height: 200%;
position: fixed;
width: 185px;
}

.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}

.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}

.menu a {
color: rgb(250,250,250);
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}

.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}

.header {
}

.header i {
font-size: 30px;
margin-top: 15px;
}

.header a{
color: rgb(250,250,250);
font-size: 40px;
text-align: center;
}

.header .col-md-10 {
background-color: rgb(50,50,50);
width: 85%;
margin-left:auto;
margin-right:auto;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}

.container-fluid {
max-width: none;
}

jumbo {}

.jumbo .col .een {}

.jumbo .col .een img {}

.jumbo .col .een #een {
height: 170px;
width: auto;
position: relative;
padding-top: 50px;
margin-top: 60px;
}

.jumbo .col .een #eeneen {
height: 250px;
width: auto;
padding-top: 20px;
}

.jumbo .col .een .texteen h1 {
font-size: 14px;
padding-top: 21px;
text-align: center;
width: 350px;
}

.jumbo .col .twee {
height: 350px;
margin: 25px;
}

.jumbo .col .twee h1 {
font-size: 160px;
position: relative;
text-align: center;
vertical-align: middle;
padding-top: 50px;
padding-bottom: 20px;
margin-bottom: 40px;
}

.jumbo .col h2 {
font-size: 14px;
padding-bottom: 100px;
}

.jumbo .col .drie {}

.jumbo .col .drie img {
height: 170px;
width: auto;
position: relative;
padding-top: 50px;
margin-top: 60px;
}

.jumbo .col .drie h1 {
font-size: 14px;
font-weight: 600;
text-align: center;
vertical-align: bottom;
padding: 15px 50px;
border: 1px solid #333333;
border-radius: 1500px;
text-transform: uppercase;
letter-spacing: 1.1px;
margin-top: 20px;
}

.jumbo .col .vier {}

.jumbo .col .vier img {}

.jumbo .col .vier #vier {
height: 170px;
width: auto;
position: relative;
padding-top: 50px;
margin-top: 60px;
}

.jumbo .col .vier #viervier {
height: 250px;
width: auto;
padding-top: 20px;
}

.jumbo .col .vier .textvier h1 {
font-size: 14px;
padding-top: 21px;
text-align: center;
width: 350px;
}

.supporting {
padding-top: 80px;
padding-bottom: 100px;
}

.supporting .col {
float: left;
width: 33%;
font-family: 'Raleway', sans-serif;
text-align: center;
margin-bottom: 24px;
}

.supporting img {
height: 32px;
margin-top: 150px;
}

.supporting .col h1 {
font-size: 35px;
padding-bottom: 48px;
margin-top: 190px;
}

.supporting h2 {
font-weight: 600;
font-size: 23px;
text-transform: uppercase;
padding: 0 50px;
margin-bottom: 60px;
}

.supporting p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
}

.supporting a {
font-size: 10px;
color: #333333;
font-weight: 600;
background-color: #fff;
border: 1px solid #333333;
padding: 15px 50px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.1px;
}

.clearfix {
clear: both;
}

.footer {
background-color: #333;
color: #fff;
padding: 30px 0;
}

.footer p {
font-family: 'Raleway', sans-serif;
text-transform: normal;
font-size: 11px;
}

@media (max-width: 500px) {
.main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
}

JS:

$(document).ready(function () {
$(".icon-menu").click(function () {
$(".menu").animate({
left: "0px"
}, 600);
$(".icon-menu").toggle(1600);

$("body").animate({
left: "185px"
}, 600);
});
});

$(document).ready(function () {
$('.icon-close').click(function () {
$('.menu').animate({
left: "-185px"
}, 600);
$(".icon-menu").toggle(600);

$('body').animate({
left: "0px"
}, 600);
});
});

var operator = '+=';
var operator1 = '+=';
var operator11 = '+=';
$(document).ready(function () {
$(".een").click(function () {
$("#een").animate({
left: operator + '-200',
bottom: operator + '-330',
width: operator1 + '-85',
height: operator1 + '-85',
marginTop: operator11 + '-145',
paddingTop: operator11 + '-50',
});
if (operator == '+=') {
operator = '-=';
} else {
operator = '+=';
}
if (operator1 == '+=') {
operator1 = '-=';
} else {
operator1 = '+=';
}
if (operator11 == '+=') {
operator11 = '-=';
} else {
operator11 = '+=';
}
$("#eeneen").toggle(300);
$(".texteen").toggle(600);
});
});

var operator2 = '+=';
$(document).ready(function () {
$(".twee").click(function () {
$(".twee").children('h1').animate({
top: operator2 + '-60'
});
if (operator2 == '+=') {
operator2 = '-=';
} else {
operator2 = '+=';
}
$(".tweetwee").fadeToggle(600);
});
});

var operator3 = '+=';
$(document).ready(function () {
$(".drie").click(function () {
$("#drie").animate({
top: operator3 + '-60'
});
if (operator3 == '+=') {
operator3 = '-=';
} else {
operator3 = '+=';
}
$(".driedrie").toggle(600);
});
});


var operator4 = '+=';
var operator5 = '+=';
$(document).ready(function () {
$(".vier").click(function () {
$("#vier").animate({
left: operator4 + '-200',
bottom: operator4 + '-330',
width: operator5 + '-85',
height: operator5 + '-85',
marginTop: operator5 + '-145',
paddingTop: operator5 + '-50',
});
if (operator4 == '+=') {
operator4 = '-=';
} else {
operator4 = '+=';
}
if (operator5 == '+=') {
operator5 = '-=';
} else {
operator5 = '+=';
}
$("#viervier").toggle(300);
$(".textvier").toggle(600);
});
});

Codepen

最佳答案

在style中改变body style如下

body{
left: 0;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}

重新定义溢出属性

关于jquery - 移动 <body> 使我无法滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32521311/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com