Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Выделить блок при прокрутке (https://javascript.ru/forum/dom-window/67300-vydelit-blok-pri-prokrutke.html)

Deymos 09.02.2017 10:05

Выделить блок при прокрутке
 
Здравствуйте!

Имеется вот такой js-код

<script type="text/javascript">
jQuery(document).ready(function(){

	// = Вешаем событие прокрутки к нужному месту
	//	 на все ссылки якорь которых начинается на #
	jQuery('a[href^="#"]').bind('click.smoothscroll',function (e) {
		e.preventDefault();

		var target = this.hash,
		$target = $(target);

		jQuery('html, body').stop().animate({
			'scrollTop': $target.offset().top  - 100
		}, 900, 'swing', function () {
			window.location.hash = target;
		});
	});

});
</script>


Благодаря ему происходит плавная прокрутка к нужному элементу (по ID). Что нужно добавить чтобы добиться:
1. Выделение блока относительно другой части контента. К примеру у меня есть div. При клике на якорь прокрутить страницу к блоку и затемнить остальной контент кроме текста в блоке.
2. При клике за границы блока - выделение пропадало.

Уже всю голову сломал. Помогите пожалуйста.

ksa 09.02.2017 10:27

Цитата:

Сообщение от Deymos
Уже всю голову сломал.

Например "темнить" можно ДИВами с полупрозрачным фоном, созданными поверх контента...
И удалять те ДИВы если по ним клацнули...

Но задачка не из бесплатных. :D

Deymos 09.02.2017 10:45

а если так:

<script type="text/javascript">
var divs = jQuery('.pobw'),
    layer = jQuery('#layer');
jQuery(document).ready(function(){

	// = Вешаем событие прокрутки к нужному месту
	//	 на все ссылки якорь которых начинается на #
	jQuery('a[href^="#"]').bind('click.smoothscroll',function (e) {
		e.preventDefault();

		var target = this.hash,
		$target = jQuery(target);

		jQuery('html, body').stop().animate({
			'scrollTop': $target.offset().top  - 100
		}, 900, 'swing', function () {
			window.location.hash = target;
			divs.css('z-index',0);
			jQuery(this).css('z-index',10);
			layer.fadeIn('fast');
		});
	});

});
layer.click(function(){
    jQuery(this).fadeOut('fast');
});
</script>


Затемнить я затемнил, как определить ID, на который клацнули?

рони 09.02.2017 10:49

Deymos,
http://javascript.ru/forum/dom-windo...tml#post443459

Dilettante_Pro 09.02.2017 10:50

Deymos,
Цитата:

Сообщение от Deymos
Затемнить я затемнил, как определить ID, на который клацнули?

http://javascript.ru/node/1588

Deymos 09.02.2017 11:06

а можно для тупых прям носом тыкнуть?

Получается вместо:
var divs = jQuery('.pobw'),


который используется тут:
divs.css('z-index',0);
jQuery(this).css('z-index',10);


подставить ID якоря...

Выход из подсветки уже реализовал:
layer.click(function(){
    jQuery(this).fadeOut('fast');
});

Deymos 09.02.2017 12:36

Все сделал. Спасибо!


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