Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.04.2019, 00:50
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 83

Покритикуйте, пожалуйста, код )
Привет! Да, задача тривиальная и решений в нете полно. Но мне они все показались очень сложными. Я сделал сам. Всё работает, даже в IE, если только синтаксис перевести из ES6 в ES5 )) Но для меня сложной оказалась задача сделать так, чтобы при прокрутке страницы и появлении в окне определённых кусков текста с заголовком становилась активной соответствующая ссылка (подсвечивалась жёлтым). Я сделал через getBoundingClientRect(). Однако в задаче требуется всё же сделать с помощью JQ, а getBoundingClientRect() чистый JS... Подскажите, есть ли какой-либо аналог этот функции в JQ? Или, может, есть какие-то более "элегантные" способы решения этой задачи на JQ? (текст был изначально длиннее, чтобы была прокрутка, пришлось их для размещения здесь укоротить, чтобы можно было разместить)
<!doctype html>
<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>1</title>
        <style>
            html, body{
                margin: 0;
                background: #eee;
            }

            .menu{
               position: fixed;
               top: 0;
               left: 0;
               background: #000;
               color: #fff;
               height: 50px;
               width: 100%;
           }

           .menu a{
               color: inherit;
               line-height: 50px;
               font-size: 20px;
               margin: 0 10px;
               transition: color 0.4s;
          }

          .menu a.active{
              color: #ff0;
          }

           .content{
               margin-top: 70px;
           }

           
        </style>
    </head>
    <body>
        <div class="menu">
            <a href="#about">О курсе</a>
            <a href="#price">Стоимость</a>
            <a href="#app">Запись</a>
            <a href="#nz">Нз</a>
        </div>
        <div class="content">
            <h2 id="about">О курсе</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                      
            <h2 id="price">Стоимость</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        
            <h2 id="app">Запись</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>           

            <h2 id="nz">Нз</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                       
        </div>
        <button type="button" class="scroll-top-btn">
            <svg viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.7 22.7l9-9c.2-.2.3-.5.3-.7 0-.3-.1-.5-.3-.7l-9-9c-.2-.2-.4-.3-.7-.3s-.5.1-.7.3l-1.4 1.4c-.4.4-.4 1 0 1.4l4 4c.3.3.1.9-.4.9H1c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1h16.6c.4 0 .7.5.4.9l-4 4c-.4.4-.4 1 0 1.4l1.4 1.4c.2.2.4.3.7.3.2 0 .4-.1.6-.3z"/>
              </svg>
        </button>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/scripts.js"></script>
    </body>
</html>

$(function(){
    const $scrollTopBtn = $('.scroll-top-btn'),
                  $links = $('.menu a');
    let docHeight = $('body').height();

    hightlightLink();
    showHideScroll();

    $links.on('click', function(e) {
        e.preventDefault();
        $link = $(this);
        $target = $($link.attr('href'));

        switchClass($links, $link);

        $('html, body').animate({
            scrollTop: $target.offset().top - 70
        }, 700);
    });

    $(window).on('scroll', showHideScroll).on('scroll', hightlightLink);

    $scrollTopBtn.on('click', function() {
        let scrollTime = 1500 * $(window).scrollTop()/docHeight;

        $('html, body').animate({
            scrollTop: 0
        }, scrollTime);
    });

    function showHideScroll() {
        if($(window).scrollTop() > 200) {
            $scrollTopBtn.fadeIn();
        } else {
            $scrollTopBtn.fadeOut();
        }
    }

    function hightlightLink() {
        $links.each(function(i, link) {
            $link = $(link);
            $target = $($link.attr('href'));
            $distance = $target[0].getBoundingClientRect().top;
            console.log($target[0].clientRect());

            if($distance >= 0 && $distance < $(window).height()/3) {
                switchClass($links, $link);
            }
        });
    }

    function switchClass($links, $link) {
        $links.removeClass('active');
        $link.addClass('active');
    }
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
пожалуйста переведите код с c++ на JavaScript GermanIvk05 jQuery 4 14.12.2018 21:41
Пожалуйста, кому не лень, посмотрите код, что он примерно делает?? arsen97 Общие вопросы Javascript 1 15.08.2014 15:51
Расшифруйте пожалуйста код! Mrs.Haneki Элементы интерфейса 2 17.04.2014 09:25
помогите пожалуйста улучшить код. Duda.Ml1986@gmail.com Серверные языки и технологии 4 07.01.2012 18:53
покритикуйте подход пожалуйста igrok Общие вопросы Javascript 5 30.03.2011 16:22