![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
08.11.2017, 22:20
|
![Аватар для LADYX](https://javascript.ru/forum/image.php?u=40601&dateline=1424365279) |
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
Как сделать отступ?
Здравствуйте! Подскажите, пожалуйста, как изменить механизм работы скрипта, а именно, при выборе секции, чтобы она "подкручивалась" не под самый верх экрана, а с отступом от верха, например, 50px? Спасибо!
$(document).ready(function () {
$(document).on("scroll", onScroll);
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('panel-pp-active');
})
$(this).addClass('panel-pp-active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#panel-pp a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#panel-pp ul li a').removeClass("panel-pp-active");
currLink.addClass("panel-pp-active");
var pageURL = $(location). attr("href");
var splittedURL = pageURL.split('/')[0];
}
else{
currLink.removeClass("panel-pp-active");
}
});
}
<style>
body, html {
margin: 0;
padding: 0 0 0 160px;
height: 100%;
width: 100%;
}
#panel-pp {
width: 150px;
height: 100%;
display: block;
position: fixed;
top: 0;
left: 0;
background: #fff;
background: rgba(255,255,255,1);
-webkit-box-shadow: -1px 0px 5px rgba(0,0,0,.4);
-moz-box-shadow: -1px 0px 5px rgba(0,0,0,.4);
box-shadow: -1px 0px 5px rgba(0,0,0,.4);
z-index: 11;
}
#panel-pp ul {
margin: 15px 0 0 0;
}
#panel-pp ul li {
list-style: none;
}
.panel-pp-main {
padding: 10px 20px;
}
.panel-pp-main a {
font-size: 16px;
line-height: 30px;
font-family: PT Serif,Georgia,Times New Roman,Times,serif;
text-decoration: none;
color: #333;
}
.panel-pp-main .panel-pp-active {
color: #da251e;
color: rgb(218,37,30);
}
#pp1,
#pp2,
#pp3 {
height: 300px;
}
</style>
1<br>1<br>1<br>1<br>1<br>1<br>1 <br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br> 1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1 <br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<div id="pp1">Секция 1</div>
<div id="pp2">Секция 2</div>
<div id="pp3">Секция 3</div>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br> 1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br> 1<br>1<br>1<br>1<br>1<br>1<br>
<div id="panel-pp">
<div class="panel-pp-main">
<ul>
<li><a href="#pp1">Один</a></li>
<li><a href="#pp2">Два</a></li>
<li><a href="#pp3">Три</a></li>
</ul>
</div>
</div>
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
08.11.2017, 23:38
|
![Аватар для рони](https://javascript.ru/forum/image.php?u=7416&dateline=1372796129) |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,094
|
|
Сообщение от LADYX
|
$target.offset().top+2
|
![Unsure](https://javascript.ru/forum/images/smilies/unsure.gif) 2 измените на 52
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
09.11.2017, 09:39
|
![Аватар для LADYX](https://javascript.ru/forum/image.php?u=40601&dateline=1424365279) |
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
рони,
приветствую вас!
Сообщение от рони
|
2 измените на 52
|
это ничего не дает.
А если я удаляю
function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
}
и прописываю
$target.offset().top - 50
то тогда перестает работать подсветка меню. А именно: до нажатия на любую ссылку меню при прокрутке страницы ссылки меню автоматически подсвечиваются. Как только мы нажимаем на любую ссылку меню, то после этого при прокрутке страницы ссылки меню перестают подсвечиваться.
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
09.11.2017, 09:56
|
![Аватар для рони](https://javascript.ru/forum/image.php?u=7416&dateline=1372796129) |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,094
|
|
LADYX,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(document).on("scroll", onScroll);
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('panel-pp-active');
})
$(this).addClass('panel-pp-active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top -48
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#panel-pp a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top - 48 <= scrollPos && refElement.position().top - 48 + refElement.height() > scrollPos) {
$('#panel-pp ul li a').removeClass("panel-pp-active");
currLink.addClass("panel-pp-active");
var pageURL = $(location). attr("href");
var splittedURL = pageURL.split('/')[0];
}
else{
currLink.removeClass("panel-pp-active");
}
});
}
</script>
</head>
<body>
<style>
body, html {
margin: 0;
padding: 0 0 0 160px;
height: 100%;
width: 100%;
}
#panel-pp {
width: 150px;
height: 100%;
display: block;
position: fixed;
top: 0;
left: 0;
background: #fff;
background: rgba(255,255,255,1);
-webkit-box-shadow: -1px 0px 5px rgba(0,0,0,.4);
-moz-box-shadow: -1px 0px 5px rgba(0,0,0,.4);
box-shadow: -1px 0px 5px rgba(0,0,0,.4);
z-index: 11;
}
#panel-pp ul {
margin: 15px 0 0 0;
}
#panel-pp ul li {
list-style: none;
}
.panel-pp-main {
padding: 10px 20px;
}
.panel-pp-main a {
font-size: 16px;
line-height: 30px;
font-family: PT Serif,Georgia,Times New Roman,Times,serif;
text-decoration: none;
color: #333;
}
.panel-pp-main .panel-pp-active {
color: #da251e;
color: rgb(218,37,30);
}
#pp1,
#pp2,
#pp3 {
height: 300px;
}
</style>
1<br>1<br>1<br>1<br>1<br>1<br>1 <br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br> 1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1 <br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<div id="pp1">Секция 1</div>
<div id="pp2">Секция 2</div>
<div id="pp3">Секция 3</div>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br> 1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br> 1<br>1<br>1<br>1<br>1<br>1<br>
<div id="panel-pp">
<div class="panel-pp-main">
<ul>
<li><a href="#pp1">Один</a></li>
<li><a href="#pp2">Два</a></li>
<li><a href="#pp3">Три</a></li>
</ul>
</div>
</div>
</body>
</html>
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
09.11.2017, 10:35
|
![Аватар для LADYX](https://javascript.ru/forum/image.php?u=40601&dateline=1424365279) |
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
рони,
при нажатии на ссылки все равно секции подкручиваются под самый верх экрана, без отступа. Может быть нужно удалить коллбэк
function () { window.location.hash = target; $(document).on("scroll", onScroll); }
и правильно ли это будет?
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
09.11.2017, 11:42
|
![Аватар для рони](https://javascript.ru/forum/image.php?u=7416&dateline=1372796129) |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,094
|
|
Сообщение от LADYX
|
window.location.hash = target
|
history.replaceState(history.state, document.title, location.href.replace(/#.*$/g, '') + target);
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
09.11.2017, 13:34
|
![Аватар для LADYX](https://javascript.ru/forum/image.php?u=40601&dateline=1424365279) |
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
рони,
спасибо вам большое, да, всё работает! Удачи вам!
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
10.11.2017, 16:36
|
![Аватар для LADYX](https://javascript.ru/forum/image.php?u=40601&dateline=1424365279) |
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
рони,
я прошу прощения за вновь поднятую тему. Хотелось бы уточнить следующее. Эта 40-ая строчка
if (refElement.position().top - 48 <= scrollPos && refElement.position().top - 48 + refElement.height() > scrollPos)
нам определяет, когда нужно подсвечивать ссылку меню при прокрутке страницы, т.е. 48px от верхнего края страницы.
А как изменить именно эту строку, чтобы указать не определенное кол-во пикселей сверху, а 50%?
Я знаю, например, как можно разместить какой-то блок по вертикали, высчитав с помощью скрипта его высоту. А вот как в этом случае сделать, ума не приложу. Нам ведь не нужно брать в зачет всю секцию. А надо лишь, чтобы срабатывала подсветка тогда, когда верхняя часть секции на расстоянии 50% от верха экрана. Подскажите, пожалуйста.
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
10.11.2017, 16:42
|
![Аватар для рони](https://javascript.ru/forum/image.php?u=7416&dateline=1372796129) |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,094
|
|
LADYX,
замените 48 на $(window).height()/2
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
10.11.2017, 18:33
|
![Аватар для LADYX](https://javascript.ru/forum/image.php?u=40601&dateline=1424365279) |
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
рони,
ну да, точно. Мне позор самому не сделать, экран делим на два, просто же как два пальца.
рони,
спасибо! И простите за мой такой наитупейший вопрос.
|
|
|
|