Почему мой стикер не работает с сафари и интернет-браузером? - PullRequest
Новая
       4

Почему мой стикер не работает с сафари и интернет-браузером?

0 голосов
/ 23 января 2019 

/*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 голосов
/ 23 января 2019

Sticky не поддерживается во всех версиях IE, см .: 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 */
}

Имеет ли это смысл для вас?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...