[英]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>
我无法找到为什么在滚动页面时粘性条不会消失并且颜色不会改变的原因。
我尝试使用chrome控制台理解，但是我对JS的了解真的很差。。。我尝试从此处使用和转换教程：“ https://www.w3schools.com/howto/howto_js_navbar_sticky.asp ”。
在野生动物园中，导航栏在跳跃，不会随着滚动和IE淡出，我认为它也不会淡出（我不记得我无法在Mac上对其进行测试）
您可以在此链接上查看该网站： http : //www.coramp.eu
在模拟器上，您可以看到最高利润，但是我在任何浏览器上都没有，而且我也不想。 我想将导航栏粘贴在窗口顶部
我可以帮忙吗？ ：'（
并非所有IE版本都支持Sticky，请参阅： https : //caniuse.com/#search=sticky
在野生动物园中，导航栏在跳跃并且不会消失
在Safari上不褪色，因为您使用的是RGBA（将不透明度指定为0.9），但是您放置了RGB。 因此应改为rgb(139, 139, 157, 0.9) rgba(139, 139, 157, 0.9); ，因此：
#header.isSticky {
background: rgba(139, 139, 157, 0.9);
...
}
跳跃的原因是，当header变为sticky ，它的行为就像位置fixed ，并且下面的所有内容都“跳到”该位置，因为它变得可用。 一种解决方法是在.slideshow-container添加一个填充，然后将其.slideshow-container在header后面，并使用负边距。
.slideshow-container {
...
padding-top: 120px; /* 50px plus header height */
margin-top: -70px; /* header height */
}
这对您有意义吗？
为什么我的Twitter按钮在Internet Explorer 7中不起作用？
[英]Why doesn't my Twitter button work in Internet Explorer 7?
我的滚动处理程序JavaScript在Internet Explorer中不起作用
[英]My scroll handler JavaScript doesn't work in Internet Explorer
firstElementChild 在 Internet Explorer 7 中不起作用……我有什么选择？
[英]firstElementChild doesn't work in Internet Explorer 7…what are my options?
为什么此Dojo 1.9 / JS代码在Internet Explorer 7中不起作用？
[英]Why doesn't this Dojo 1.9/JS code work in Internet Explorer 7?
为什么querySelector（JavaScript）无法与Internet Explorer一起使用？
[英]Why the querySelector (JavaScript) doesn't work with Internet Explorer?
为什么此javascript代码在Internet Explorer中不起作用？
[英]Why doesn't this javascript code work in Internet Explorer?
为什么 .data=“[filepath]” 在 Internet Explorer 中不起作用？
[英]Why doesn't .data=“[filepath]” work in Internet Explorer?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.