/*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
在模拟器上，您可以看到最高利润，但是我在任何浏览器上都没有，而且我也不想。我想将导航栏粘贴在窗口顶部
请问我可以帮忙吗？ ：'（
答案 0 :(得分：0)
并非所有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上添加填充，然后将其放置在header的后面，并使用负边距。
.slideshow-container {
...
padding-top: 120px; /* 50px plus header height */
margin-top: -70px; /* header height */
}
这对您有意义吗？