javascript运行后，页面在右侧被截断
[英]Page gets cut off on the right side after javascript runs
问题描述
当我向下滚动时，页面的右侧被切断并出现故障。 发生的情况是，当您向下滚动页面时，将滚动标题直至到达导航栏，然后导航栏将粘住并与页面的其余部分一起向下滚动。 我觉得这是我所忽略的简单错误。 任何帮助表示赞赏:)
<script> var mn = $(".main-nav"); mns = "main-nav-scrolled"; hdr = $('header').height(); $(window).scroll(function() { if( $(this).scrollTop() > hdr ) { mn.addClass(mns); } else { mn.removeClass(mns); } }); </script>
* { box-sizing: border-box; } body { margin: 0; padding-top: 550px; margin-bottom:-10px; } header { height: 605px; padding-top: 50px; } .main-nav, .main { position: relative; } .main-nav { background: #fff; height: 70px; z-index: 150; margin-bottom: -60px; box-shadow: 0 4px 6px rgba(0,0,0,.4); overflow: hidden; width:100%; padding-top:0px; } header, .main-nav-scrolled { position: fixed; width: 100%; top: 0; list-style-type: none; margin-top: 0px; margin: 15; padding: 0; overflow: hidden; } .main-nav-scrolled { list-style-type: none; margin-top: 0px; margin: 15; padding: 0; overflow: hidden; background-color: #333; } .main { background-image: url("img/tiles2.png"); background-attachment:fixed; padding: 120px 50px 55px; column-count: 2; column-gap: 40px; } /* ------------------------------------*/ .main-nav ul { width: 100%; list-style-type: none; margin-top: 0px; margin: 15; padding: 0; overflow: hidden; background-color: #333; } .main-nav li { float: left; } .main-nav li:last-child { border-right: none; } .main-nav li a { display: block; color: white; text-align: center; padding: 26px 29px; text-decoration: none; } .main-nav li a:hover:not(.active2) { background-color: #111; } .main-nav .active2 { background-color: #4CAF50; } .para{ position: relative; height:380px; display: inline-block; margin-left: 20px; margin-right: 20px; margin-top:30px; background-color: #FFFFFF; padding: 20px; font-size:20px; font-family:verdana; line-height:2; overflow:auto; border-radius: 20px; } .circles{ width:100%; } .bigText{ } /*----------------------------------------------------*/ .position{ font-family: 'Lobster', cursive; font-size:24px; word-spacing:10px; } .name{ font-size:24px; }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Officers</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!--<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet" type="text/css"--> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />> <link href="css/owl.carousel2.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/magnific-popup.css"> <!--<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">--> <script type="text/javascript" src="js/jquery.min.js"></script> <link rel="stylesheet" href="css/paragraph.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <body> <ul> <li><a href="Index.html">Home</a></li> <li style="float:right"><a href="Competitions2.html">Competitions</a></li> <li style="float:right"><a href="about2.html">About</a></li> </ul> <header> <img src="img/officers.png" alt="header" style="width:100%;"> </header> <div class="main-nav"> <ul> <li><a href="Index.html">Home</a></li> <li style="float:right"><a href="Competitions2.html">Competitions</a></li> <li style="float:right"><a href="about2.html">About</a></li> </ul> </div> <div class="main"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. </p></div> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2016-04-26 01:32:26
您的JavaScript看起来不错。 我确实注意到您的文档头中有一些错误。 清理干净，使其看起来像这样。
<head>
<meta charset="utf-8">
<title>Officers</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
<link href="css/owl.carousel2.css" rel="stylesheet" type="text/css">
<link href="css/magnific-popup.css" rel="stylesheet" type="text/css">
<link href="css/paragraph.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
您的CSS也有一些错误。 有许多页边距缺少px单位。 例如， margin:15 。 您正在div上应用列表样式。 例如， list-style-type: none; 在header, .main-nav-scrolled ，这不是必需的。 同时更新列css，使其支持所有浏览器。 例如;
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
但是，.main <div>的宽度在右侧减小，或者只是变得更窄的真正原因是由于您在顶部<ul>列表项中使用了浮点数。 您需要清除这些浮动。 阅读更多：关于浮动的全部信息
发生的事情是，当您滚动并且标题和main-nav固定时，紧随顶部<ul>的下一个元素是.main <div> 。 如果添加clear:both; .main将解决您的问题。
打印预览中的第一页后模态内容被切断
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.