Форум

LADYX · #1 (**permalink**) 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>

рони · #2 (**permalink**) 08.11.2017, 23:38

Сообщение от LADYX

$target.offset().top+2

2 измените на 52

LADYX · #3 (**permalink**) 09.11.2017, 09:39

рони,
приветствую вас!

Сообщение от рони

2 измените на 52

это ничего не дает.
А если я удаляю

function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        }

и прописываю

$target.offset().top - 50

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

рони · #4 (**permalink**) 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 · #5 (**permalink**) 09.11.2017, 10:35

рони,
при нажатии на ссылки все равно секции подкручиваются под самый верх экрана, без отступа. Может быть нужно удалить коллбэк

function () { window.location.hash = target; $(document).on("scroll", onScroll); }

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

рони · #6 (**permalink**) 09.11.2017, 11:42

Сообщение от LADYX

~~window.location.hash = target~~

history.replaceState(history.state, document.title, location.href.replace(/#.*$/g, '') + target);

LADYX · #7 (**permalink**) 09.11.2017, 13:34

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

LADYX · #8 (**permalink**) 10.11.2017, 16:36

рони,
я прошу прощения за вновь поднятую тему. Хотелось бы уточнить следующее. Эта 40-ая строчка

if (refElement.position().top - 48 <= scrollPos && refElement.position().top - 48 + refElement.height() > scrollPos)

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

рони · #9 (**permalink**) 10.11.2017, 16:42

LADYX,
замените 48 на $(window).height()/2

LADYX · #10 (**permalink**) 10.11.2017, 18:33

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

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

Форум

Справочник

Discord чат

Курсы javascript