Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.12.2019, 23:52
Новичок на форуме
Отправить личное сообщение для VolKTieR Посмотреть профиль Найти все сообщения от VolKTieR
 
Регистрация: 19.12.2019
Сообщений: 4

Появляющаяся кнопка включения/выключения аудио при скроллинге
Здравствуйте.

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

<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>

Последний раз редактировалось рони, 20.12.2019 в 00:50.
Ответить с цитированием
  #3 (permalink)  
Старый 20.12.2019, 00:21
Новичок на форуме
Отправить личное сообщение для VolKTieR Посмотреть профиль Найти все сообщения от VolKTieR
 
Регистрация: 19.12.2019
Сообщений: 4

Спасибо большое!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы кнопка выделялась при наведении курсора Krest_xxx Общие вопросы Javascript 2 28.08.2011 20:36
Появляющаяся/исчезающая кнопка при прокрутке страницы MailRes Элементы интерфейса 2 22.06.2011 11:49
КАК сделать чтобы кнопка PRINT не отображалась при печати?:?? xxxxx82 Элементы интерфейса 1 19.04.2011 14:58
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 16:21
Появляющаяся форма при нажатии на чекбокс bananapapa Общие вопросы Javascript 1 21.07.2010 09:39