Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Изменение прозрачности фиксированного дива (https://javascript.ru/forum/dom-window/65524-izmenenie-prozrachnosti-fiksirovannogo-diva.html)

rodiony4 23.10.2016 23:28

Изменение прозрачности фиксированного дива
 
Здравствуйте
Если родительский див #t_wrap сделать прозрачным, то дочерние дивы (один из них имеет позицию fixed), также станут прозрачные.
Но в IE11 и Opera 12 дочерний див с позицией fixed не меняет прозрачность - остается видимым
Как можно решить проблему?
<input type="button" value="прозрачность 0" id="pr2">
<input type="button" value="прозрачность 1" id="pr1">
<div id="t_wrap">
	<div id="div1" style="background:#FF0; width:100px;height:100px; position: fixed;">fixed</div>
	<div id="div2" style="background:#F00; width:150px;height:150px;"></div>
</div>

<script type="text/javascript">
$('#pr1').click(function(){
	$('#t_wrap').fadeTo(500, 1);
});	
$('#pr2').click(function(){
	$('#t_wrap').fadeTo(500, 0);
});	
</script>

рони 24.10.2016 00:20

rodiony4,
#t_wrap{
     position: relative;
  }

rodiony4 24.10.2016 01:08

рони, большое спасибо!

rodiony4 24.10.2016 22:15

рони, не поможете еще в одном вопросе?
Если через событие скролл, родительский див #t_wrap сделать прозрачным - дочерний див с позицией fixed не не хочет менять прозрачность в браузере Opera 12.
Вот видеоскрин
<div id="t_wrap" style="position:relative; background:#ccc;">
	<div id="div1" style="background:#FF0; width:400px;height:100px; position: fixed;">fixed</div>
	<div id="div2" style="background:#F00; width:400px;height:600px;"></div>
</div>

<script type="text/javascript">
$(window).scroll(function() {
	var div2OffsetTop = $('#div2').offset().top;             
	var div2Height = $('#div2').height();                  
	var div2OffsetB = div2OffsetTop + div2Height; 

	if (div2OffsetB >= $(window).scrollTop()){
		$('#t_wrap').stop().animate({'opacity':'1'},500);
	}else{
		$('#t_wrap').stop().animate({'opacity':'0'},500);
	};
});
</script>

рони 24.10.2016 23:18

rodiony4,
Цитата:

Сообщение от rodiony4
дочерний див с позицией fixed не не хочет менять прозрачность

может добавить его в анимацию
$(window).scroll(function() {
  var div2OffsetTop = $('#div2').offset().top;
  var div2Height = $('#div2').height();
  var div2OffsetB = div2OffsetTop + div2Height;
  if (div2OffsetB >= $(window).scrollTop()){
    $('#t_wrap, #div1').stop().animate({'opacity':'1'},500);
  }else{
    $('#t_wrap, #div1').stop().animate({'opacity':'0'},500);
  };
});

rodiony4 24.10.2016 23:43

рони, я уже пробовал добавлять фиксированный див в анимацию, так ('#t_wrap, #div1') или так ('#div2, #div1') - но при изменении прозрачности становится видно содержимое сразу обоих дивов, а это не тот результат, который мне нужен
нужно менять прозрачность именно родительского дива и все что в нем, может быть есть другие варианты, как решить проблему в Опере 12?

...с очередностью анимации также ожидаемого результата не достигнуто

рони 25.10.2016 00:50

rodiony4,
попробуйте задать этот вопрос ещё где-то ...


Часовой пояс GMT +3, время: 22:26.