为什么我的粘性栏不能完全与Safari和Internet Explorer一起使用？

时间：2019-01-23 00:40:21

标签： javascript html css internet-explorer safari 

/*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

在模拟器上，您可以看到最高利润，但是我在任何浏览器上都没有，而且我也不想。我想将导航栏粘贴在窗口顶部

请问我可以帮忙吗？ ：'（

1 个答案:

答案 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 */
}

这对您有意义吗？

相关问题
最新问题