为什么我的粘性栏不能完全与Safari和Internet Explorer一起使用？
[英]Why my sticky bar doesn't totally work with safari and internet explorer?
问题描述
/*sticky_navbar*/ window.onscroll = function() {myFunction()}; var navbar = document.getElementById("header"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } } $(document).ready(function(){// checks vertical position of scroll bar var scrollY = $(this).scrollTop(); // when user refreshes psge if (scrollY > 0) { // if it is anywhere but the top change opacity by adding class .isSticky $('#header').addClass('isSticky'); } else { $('#header').removeClass('isSticky'); } $(window).on('scroll', function(){ // while uesr scrolls check the scrollTop position var scrollY = $(this).scrollTop(); if (scrollY > 0) { $('#header').addClass('isSticky'); } else { $('#header').removeClass('isSticky'); } }); });
#header { display: flex; justify-content: flex-end; background: rgba(0, 1, 31, 1); -webkit-transition: background 0.5s ease-in-out; -moz-transition: background 0.5s ease-in-out; -ms-transition: background 0.5s ease-in-out; -o-transition: background 0.5s ease-in-out; transition: background 0.5s ease-in-out; z-index: 2; position: sticky; top: 0; left: 0; right: 0; } #header.isSticky { background: rgb(139, 139, 157, 0.9); -webkit-transition: background 0.5s ease-in-out; -moz-transition: background 0.5s ease-in-out; -ms-transition: background 0.5s ease-in-out; -o-transition: background 0.5s ease-in-out; transition: background 0.5s ease-in-out; } #Title { margin: 0 auto 0 0; height: 20px; margin-top: 13px; padding-left: 10px; border-bottom: 1px solid orange; padding-top: 1px; padding-bottom: 35px; flex: 1; } #navbar { display: flex; justify-content: flex-end; border-bottom: 5px solid orange; padding-bottom: 10px; padding-top: 15px; } IMG.background { display: block; margin-left: auto; margin-right: auto; z-index: 1; width: 60%; } #navbar a { display: block; color: #FFF; text-align: center; padding: 10px 16px; text-decoration: none; font-size: 17px; } #navbar a:hover { background-color: #ddd; color: black; } #navbar a.active { background: rgba(217, 78, 68, 0.8); color: white; } .sticky { position: fixed; top: 0; width: 100%; } .sticky+.content { padding-top: 60px; } body { font-size: 28px; background-color: #00011f; margin-left: auto; margin-right: auto; margin-top: auto; } iframe{ width: 100%; } h3{ font-size: 28px } /*Contenu page d'accueil*/ #vignettes { padding: 16px; color: #000; background-color: #e8f1fa; height: auto; } #discovered{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } #research{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } #content{ padding: 16px; color: #000; background-color: #e8f1fa; height: auto; } #file{ margin : 5px; } img {vertical-align: middle;} /* Slideshow container */ .mySlides{ display: flex; justify-content: center; } .mySlides > div { flex: 0 0 40%; } .slideshow-container { max-width: 800px; position: relative; margin: auto; margin-top: 50px; } /* Caption text */ .text { color: #f2f2f2; font-size: 20px; padding: 8px 12px; box-sizing: border-box; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; } /* The dots/bullets/indicators */ .dot { height: 5px; width: 5px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; }
html> <link rel="stylesheet" href="CSS/style2.css" /> <link rel="stylesheet" href="CSS/navbar.css" /> <link rel="shortcut icon" href="IMAGES/PNG/favicon.png" /> <head> <meta charset="utf-8" /> <title>CORAMP</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> </head> <body> <div id="header" class="navbar"> <div id="Title"> <a href="index.html"><img src="IMAGES/PNG/logo.png" alt="logo" height="200%" /></a> </div> <div id="navbar"> <div class="menu"> <a class="active" href="javascript:void(0)">ACCUEIL</a></div> <div class="menu"> <a href="lelectrophotonique.html">L'ELECTROPHOTONIQUE</a></div> <div class="menu"> <a href="contact.html">CONTACT</a></div> </div> </div> <div class="slideshow-container"> <div id = "slideshow" class="mySlides fade"> <div class="images"><img src="IMAGES/PNG/background.png" height= 200px></div> <div class="text"> <p>« Visualisation en 3D d'un pont photonique obtenu entre un système biologique et un principe actif »</p> </div> </div> <div class="mySlides fade"> <div class = "images"><img src="IMAGES/PNG/eau59h.png" width = 200px></div> <div class="text"> <p>« Visualisation d'un stress hydrique sous l'effet d'un set de très basse fréquence »</p></div> </div> <div class="mySlides fade"> <div class ="images"> <img src="IMAGES/PNG/pontcarroussel.png" height = 200px></div> <div class="text"> <p>« Ponts photoniques obtenus à partir de deux composites dentaires de composition différente »</p></div> </div> </div> <br> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div>
I can't find why my sticky bar doesn't fade and doesn't change color when I scroll on my page. 
我无法找到为什么在滚动页面时粘性条不会消失并且颜色不会改变的原因。
I try to understand with the chrome console but my knowledge with JS is really poor... I tried to use and transform a tutorial from here : " https://www.w3schools.com/howto/howto_js_navbar_sticky.asp " . 我尝试使用chrome控制台理解，但是我对JS的了解真的很差。。。我尝试从此处使用和转换教程：“ https://www.w3schools.com/howto/howto_js_navbar_sticky.asp ”。
On safari the navbar is jumping and doesn't fade with scroll and with IE I think it's doesn't fade too (I don't remember I can't test it on my mac) 在野生动物园中，导航栏在跳跃，不会随着滚动和IE淡出，我认为它也不会淡出（我不记得我无法在Mac上对其进行测试）
You can see the website on this link : http://www.coramp.eu 您可以在此链接上查看该网站： http : //www.coramp.eu
On the simulator you can see a top-margin but I don't have it on any browser and I don't want it. 在模拟器上，您可以看到最高利润，但是我在任何浏览器上都没有，而且我也不想。 I'm looking to stick the navbar on the top of the window 我想将导航栏粘贴在窗口顶部
Can I get help please ? 我可以帮忙吗？ :'( ：'（
1 个解决方案
解决方案1
0 2019-01-23 01:11:44
Sticky is not supported on all IE versions, see: https://caniuse.com/#search=sticky 并非所有IE版本都支持Sticky，请参阅： https : //caniuse.com/#search=sticky
On safari the navbar is jumping and doesn't fade
Not fading on Safari because you are using RGBA as you specified the opacity as 0.9, but you put RGB. 在Safari上不褪色，因为您使用的是RGBA（将不透明度指定为0.9），但是您放置了RGB。 So instead rgb(139, 139, 157, 0.9) , it should be rgba(139, 139, 157, 0.9); 因此应改为rgb(139, 139, 157, 0.9) rgba(139, 139, 157, 0.9); , so: ，因此：
#header.isSticky {
background: rgba(139, 139, 157, 0.9);
...
}
The jumping is because when your header became sticky , it behaves like position fixed , and all the content below is "jumping" to that position because it became available. 跳跃的原因是，当header变为sticky ，它的行为就像位置fixed ，并且下面的所有内容都“跳到”该位置，因为它变得可用。 A workaround would be add a padding to your .slideshow-container and then position it behind the header applying a negative margin. 一种解决方法是在.slideshow-container添加一个填充，然后将其.slideshow-container在header后面，并使用负边距。
.slideshow-container {
...
padding-top: 120px; /* 50px plus header height */
margin-top: -70px; /* header height */
}
Does it make sense for you? 这对您有意义吗？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.