0

Создал плавающий виджет при скроллинге, но виджет постоянно по разному фиксируется, т.е. отстут сверху постоянно разный.
Если несколько раз подряд проскроллить вверх-вниз, то станет заметно, что иногда верхнюю часть виджета не видно. т.е. когда у виджета позиционирование fixed, тогда свойство top вычисляется по разному. Как сделать, чтобы при скроллинге у виджета отступ сверху был постоянен?
Посоветуйте, как улучшить js-код?

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        * {
            box-sizing: border-box;
        }
        section{
            clear: both;
            overflow: hidden;
            margin-bottom: 20px;
        }
        .wrapper{
            position: relative;
            width: 90%;
            margin: 0 auto;
            overflow: hidden;
        }
        header{
            height: 100px;
            border:1px solid gray;
            text-align: center;
            margin: 20px;
        }
        .content{
            width: 50%;
            height: 1500px;
            border:1px solid gray;
            float: left;
            padding: 20px;
        }
        #widget{
            float: right;
            width: 200px;
            border:1px solid gray;
            padding: 20px;
        }
        .fixed{
            position: fixed;
            right: 5%;
        }
    </style>
    <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
</head>
<body>



<section class="section1">
    <div class="wrapper">
        <header id="header1"><h2>section1</h2></header>
        <div class="content">
            content
        </div>

        <div id="widget">
            <div class="title">
                <p>Title</p>
            </div>
            <div class="bottom">
                <p>bottom</p>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </div>
        </div>
    </div>
</section>
<section class="section2">
    <div class="wrapper">
        <header><h2>section2</h2></header>
        <div class="content">
            content
        </div>
    </div>
</section>


<script>
    var $itemWidget = $('#widget'),
        $header = $('#header1'),
        topPos = $itemWidget.offset().top,
        widgetHeight = $itemWidget.outerHeight(),
        endContent = $('.section2').offset().top,
        headerHeight = $header.outerHeight();

    jQuery(window).on('scroll', function() {
        var $window = $(window),
            width = $window.width(),
            scroll = $window.scrollTop();
        if(width >= 1024){
            if (scroll > topPos && scroll < ((parseInt(endContent) - parseInt(widgetHeight)) - parseInt(headerHeight))) {
                var topPosFixed = $itemWidget.offset().top - $window.scrollTop();
                !$itemWidget.hasClass('fixed') && $itemWidget.addClass('fixed').removeAttr("style").css({'top': topPosFixed });
            }
            else if (scroll >= ((parseInt(endContent) - parseInt(widgetHeight)) - parseInt(headerHeight))) {
                $itemWidget.removeClass('fixed').css({'position':'absolute','bottom':'0','right': '0', 'top': 'auto'});
            }
            else {
                $itemWidget.removeClass('fixed');
            }
        }
    });

</script>

</body>
</html>

2
  • Добавьте в outerHeight(true)
    – Shnur
    25 июн 2017 в 5:51
  • @Shnur, нет, это не помогло, при скролле иногда часть виджета не видно
    – word
    25 июн 2017 в 6:02

1 ответ 1

0

Проверил работает все плавненько стопорит. Работает в ИЕ11, ФФ и Хром

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            padding: 0;
            margin: 0;
        }

        section{
            clear: both;
            overflow: hidden;
            margin-bottom: 20px;
        }
        .wrapper{
            position: relative;
            width: 90%;
            margin: 0 auto;
            overflow: hidden;
        }
        header{
            height: 100px;
            border:1px solid gray;
            text-align: center;
            margin: 20px;
        }
        .content{
            width: 50%;
            height: 1500px;
            border:1px solid gray;
            float: left;
            padding: 20px;
        }
        #widget{
            float: right;
            width: 200px;
            border:1px solid gray;
            padding: 20px;
        }
        .slidingBlockFixed{
            top: 20px;
            position: fixed;
            right: 5%;
        }
        .slidingBlockPositionFooter {
            top: auto;
            bottom: 0;
            right: 0;
            position: absolute;
        }
    </style>
</head>
<body>

<section class="section1">
    <div class="wrapper">
        <header id="header1"><h2>section1</h2></header>
        <div class="content">
            content
        </div>

        <div id="widget" class="slidingBlockDefault">
            <div class="title">
                <p>Title</p>
            </div>
            <div class="bottom">
                <p>bottom</p>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </div>
        </div>

    </div>
</section>
<section class="section2">
    <div class="wrapper">
        <header><h2>section2</h2></header>
        <div class="content">
            content
        </div>
    </div>
</section>

<footer>
    <div class="wrapper">
        <header><h2>section2</h2></header>
        <div class="content">
            content
        </div>
    </div>
</footer>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
    var $widget = $('#widget'),
        $header = $('#header1'),
        headerHeight = $header.outerHeight();

    var widgetHeight = $widget.outerHeight(true),
        width = $(window).width();

    $(document).on('scroll', function() {
        var $this = $(this),
            thisScrollTop = $this.scrollTop(),
            stopSliding = $('.section2').offset().top,
            documentHeight = $(document).height();
        if(width >= 1024) {
            if ((documentHeight - widgetHeight) <= (thisScrollTop + (documentHeight - stopSliding + 60))) {// Тут корректировочные 60 пикселей маргины
                $widget.addClass('slidingBlockPositionFooter');
            } else {
                $widget.removeClass('slidingBlockPositionFooter');
                if (thisScrollTop >= headerHeight && $widget.hasClass('slidingBlockDefault')) {
                    $widget.removeClass('slidingBlockDefault').addClass('slidingBlockFixed');
                }
                if (thisScrollTop <= headerHeight + 20 && $widget.hasClass('slidingBlockFixed')) { // Тут корректировочные 20 пикселей маргины
                    $widget.removeClass('slidingBlockFixed').addClass('slidingBlockDefault');
                }
            }
        }
    });

</script>

</body>
</html>
8
  • если добавить футер, то виджет будет некорректно фиксироваться
    – word
    25 июн 2017 в 10:39
  • Поправил, теперь должно быть все ок
    – Shnur
    25 июн 2017 в 11:25
  • не затруднит ли вас объяснить эту строчку в вашем коде, что обозначает это условие? if ((documentHeight - widgetHeight) <= (thisScrollTop + (documentHeight - stopSliding + 60))) {
    – word
    25 июн 2017 в 12:33
  • получается, что абсолютное позиционирование задаётся виджету только тогда, когда высота всего документа - высота виджета меньше чем условие во вторых скобках? Как такое может быть? Ведь если вычесть высоту виджета из высоты всего документа, тогда значение будет чуть выше футера!
    – word
    25 июн 2017 в 12:35
  • Есть высота скользящего блока и есть момент когда он должен тормознуть, вот тут и вычисляется когда нужно прекратить скольжение.
    – Shnur
    25 июн 2017 в 12:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.