Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как сделать отступ? (https://javascript.ru/forum/dom-window/71304-kak-sdelat-otstup.html)

LADYX 08.11.2017 22:20
Как сделать отступ?
 
Здравствуйте! Подскажите, пожалуйста, как изменить механизм работы скрипта, а именно, при выборе секции, чтобы она "подкручивалась" не под самый верх экрана, а с отступом от верха, например, 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>

рони 08.11.2017 23:38
Цитата:
Сообщение от LADYX
$target.offset().top+2
:-? 2 измените на 52

LADYX 09.11.2017 09:39
рони,
приветствую вас!
Цитата:
Сообщение от рони
2 измените на 52
это ничего не дает.
А если я удаляю
function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        }

и прописываю
$target.offset().top - 50

то тогда перестает работать подсветка меню. А именно: до нажатия на любую ссылку меню при прокрутке страницы ссылки меню автоматически подсвечиваются. Как только мы нажимаем на любую ссылку меню, то после этого при прокрутке страницы ссылки меню перестают подсвечиваться.

рони 09.11.2017 09:56
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>

LADYX 09.11.2017 10:35
рони,
при нажатии на ссылки все равно секции подкручиваются под самый верх экрана, без отступа. Может быть нужно удалить коллбэк
function () { window.location.hash = target; $(document).on("scroll", onScroll); }

и правильно ли это будет?

рони 09.11.2017 11:42
Цитата:
Сообщение от LADYX
window.location.hash = target
 
history.replaceState(history.state, document.title, location.href.replace(/#.*$/g, '') + target);

LADYX 09.11.2017 13:34
рони,
спасибо вам большое, да, всё работает! Удачи вам!

LADYX 10.11.2017 16:36
рони,
я прошу прощения за вновь поднятую тему. Хотелось бы уточнить следующее. Эта 40-ая строчка
if (refElement.position().top - 48 <= scrollPos && refElement.position().top - 48 + refElement.height() > scrollPos)

нам определяет, когда нужно подсвечивать ссылку меню при прокрутке страницы, т.е. 48px от верхнего края страницы.
А как изменить именно эту строку, чтобы указать не определенное кол-во пикселей сверху, а 50%?
Я знаю, например, как можно разместить какой-то блок по вертикали, высчитав с помощью скрипта его высоту. А вот как в этом случае сделать, ума не приложу. Нам ведь не нужно брать в зачет всю секцию. А надо лишь, чтобы срабатывала подсветка тогда, когда верхняя часть секции на расстоянии 50% от верха экрана. Подскажите, пожалуйста.

рони 10.11.2017 16:42
LADYX,
замените 48 на $(window).height()/2

LADYX 10.11.2017 18:33
рони,
ну да, точно. Мне позор самому не сделать, экран делим на два, просто же как два пальца.

рони,
спасибо! И простите за мой такой наитупейший вопрос.


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