Форум

VolKTieR · #1 (**permalink**) 19.12.2019, 23:52

Здравствуйте.

Имеется данный код:

<audio id="audio">
	<source src="audio/1.mp3" type="audio/mpeg">
</audio>

<div class="fixedbut" id="sebut">Звук</div>

<style>
div.fixedbut { position: fixed;
	bottom: 93%;
	right: 20px; 
	display: block; 
	background: white; 
	border-radius: 10px;
	color: black; 
	text-decoration: none; 
	padding: 6px 23px;
	font-size: 17px ;
	-webkit-transition: 0.33s all ease-out; 
	-o-transition: 0.33s all ease-out;
	 transition: 0.33s all ease-out;
	z-index: 999; }

div.fixedbut:hover {
        background: grey;
        color: white; }
</style>

<script>
document.getElementById("sebut").onclick = function()
    {
      var myaudio = document.getElementById("audio");
      if(myaudio.paused == true)
      {
        document.getElementById("audio").play();
 }
      else if (myaudio.paused == false)
      {
        document.getElementById("audio").pause();
}
    }
</script>

<script>
	$(document).ready(function(){
	  $(window).scroll(function () {
	    if ($(this).scrollTop() > 200) 
	    {
	        $('div.fixedbut').fadeIn();
	   }
	    else 
	    {
	        $('div.fixedbut').fadeOut();
	    }
  })
	});
</script>

Кнопка плавающая, останавливает звук включенный другой .
Со звуком проблем нет, но появление и исчезание кнопки при прокрутке не работает.
Подскажите пожалуйста как сделать

рони · #2 (**permalink**) 20.12.2019, 00:09

VolKTieR,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
      height: 2000px;
      background-color: #D3D3D3;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


</head>
<body>
<audio id="audio">
	<source src="audio/1.mp3" type="audio/mpeg">
</audio>

<div class="fixedbut" id="sebut">Звук</div>

<style>
div.fixedbut {
    position: fixed;
	bottom: 93%;
	right: 20px;
	display:  none;
	background: white;
	border-radius: 10px;
	color: black;
	text-decoration: none;
	padding: 6px 23px;
	font-size: 17px ;
	-webkit-transition: 0.33s all ease-out;
	-o-transition: 0.33s all ease-out;
	 transition: 0.33s all ease-out;
	z-index: 999; }

div.fixedbut:hover {
        background: grey;
        color: white; }
</style>

<script>
document.getElementById("sebut").onclick = function()
    {
      var myaudio = document.getElementById("audio");
      if(myaudio.paused == true)
      {
        document.getElementById("audio").play();
 }
      else if (myaudio.paused == false)
      {
        document.getElementById("audio").pause();
}
    }
</script>

<script>
	$(document).ready(function(){
	  $(window).scroll(function () {
	 var  vis = $('div.fixedbut').is(':visible');
	    if ($(this).scrollTop() >= 200 && !vis)
	    {
	        $('div.fixedbut').stop(true,true).fadeIn();
	   }
	    else if($(this).scrollTop() < 200 && vis )
	    {
	        $('div.fixedbut').stop(true,true).fadeOut();
	    }
  }).trigger('scroll');
	});
</script>
</body>
</html>

VolKTieR · #3 (**permalink**) 20.12.2019, 00:21

Спасибо большое!

Форум

Справочник

Discord чат

Курсы javascript