2 столбца прокручиваются вместе, более короткий столбец останавливается в конце содержимого - PullRequest
Новая
       87

2 столбца прокручиваются вместе, более короткий столбец останавливается в конце содержимого

0 голосов
/ 06 апреля 2020

Я пытаюсь установить два параллельных столбца так, чтобы более короткий столбец оставался фиксированным в конце его содержимого, а более длинный - прокручивался. Некоторое время назад я нашел хорошее простое решение: 

<div id="leftShort">left side text
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec consectetur ligula. Proin vel nulla consectetur, sollicitudin sem non, suscipit nulla. Aliquam varius sem in lorem pulvinar vulputate. Maecenas quis nisi purus. Pellentesque rutrum at mi nec placerat. In dictum, ante eget bibendum tincidunt, ligula ipsum rutrum ante, eu ultricies felis magna sit amet nibh. Cras facilisis arcu in magna placerat, id sagittis tellus mollis. Suspendisse potenti. Nulla varius elit felis. Sed volutpat ligula quis suscipit lobortis. Nulla facilisi. Aliquam in quam non arcu interdum fermentum mattis eget neque. Sed neque diam, mattis nec varius eget, porta pharetra turpis. Morbi urna tortor, venenatis quis elit ut, vestibulum volutpat lectus. Ut nec sapien tempus, lacinia lectus nec, semper tortor.</p>
    <p>BOTTOM OF LEFT</p>
</div>
<div id="rightLong">right side text
    <p>Vestibulum molestie nec quam dictum gravida. Aliquam at bibendum sem, id hendrerit orci. Curabitur magna nisi, porttitor et vulputate quis, aliquet at odio. Nullam mattis sodales tortor, volutpat mollis libero consectetur eget. Integer dapibus hendrerit lorem, at varius tellus pellentesque non. Vivamus condimentum nulla sit amet enim mattis lacinia. Nam eu massa vestibulum, tincidunt dui sit amet, tempus neque. Ut gravida nisi at purus lacinia, vel gravida nulla suscipit. Suspendisse arcu arcu, imperdiet ut diam vitae, imperdiet auctor mauris. Nunc tincidunt quis enim nec auctor. Aenean euismod nec tortor ut dignissim. Nullam ut eleifend quam, placerat varius purus. Sed lorem diam, congue vel libero eget, dapibus egestas enim. Sed placerat commodo elit vel rutrum. Quisque pretium urna non urna vestibulum pharetra vitae id justo. Integer magna neque, scelerisque in vestibulum non, accumsan quis lectus. Morbi arcu leo, semper vitae rutrum sed, elementum eget ligula. Nullam vitae neque vulputate, luctus turpis at, vulputate ipsum. Suspendisse fringilla, sem eu lacinia ultricies, libero elit lobortis turpis, vel iaculis justo ipsum convallis eros. Integer elementum augue a sem consectetur, sit amet luctus sem vestibulum. Sed id sapien quis nunc dictum sodales. In gravida tellus eu nisl iaculis semper. Sed non purus mauris. Proin auctor sem ac dui lobortis posuere. Praesent suscipit ipsum vel neque pharetra, ultrices blandit dui ultricies. Pellentesque venenatis dignissim ultrices. Ut ac felis eget massa gravida lobortis. Curabitur eu ultrices libero. Aliquam id quam at eros ullamcorper ultricies. Duis id hendrerit est, eget molestie anteSed non purus mauris. Proin auctor sem ac dui lobortis posuere. Praesent suscipit ipsum vel neque pharetra, ultrices blandit dui ultricies. Pellentesque venenatis dignissim ultrices. Ut ac felis eget massa gravida lobortis. Curabitur eu ultrices libero. Aliquam id quam at eros ullamcorper ultricies. Duis id hendrerit est, eget molestie ante. Fusce urna est, pretium eget fermentum euismod, molestie eu est. Ut id erat dui. Vivamus cursus ultricies nunc, ut posuere lectus congue sit amet. In hac habitasse platea dictumst. Vivamus rhoncus molestie malesuada. Quisque quis lectus tellus. Nulla vitae accumsan nisi, eget placerat turpis. Donec elementum sem vestibulum arcu sollicitudin volutpat. Vivamus tellus neque, semper vitae fermentum non, placerat ac quam. Integer iaculis euismod felis vel elementum. Aliquam id sodales magna, ut ultrices dolor. Aenean tincidunt feugiat nulla. Duis dignissim arcu at odio tincidunt tempus.Sed non purus mauris. Proin auctor sem ac dui lobortis posuere. Praesent suscipit ipsum vel neque pharetra, ultrices blandit dui ultricies. Pellentesque venenatis dignissim ultrices. Ut ac felis eget massa gravida lobortis. Curabitur eu ultrices libero. Aliquam id quam at eros ullamcorper ultricies. Duis id hendrerit est, eget molestie ante. Fusce urna est, pretium eget fermentum euismod, molestie eu est. Ut id erat dui. Vivamus cursus ultricies nunc, ut posuere lectus congue sit amet. In hac habitasse platea dictumst. Vivamus rhoncus molestie malesuada. Quisque quis lectus tellus. Nulla vitae accumsan nisi, eget placerat turpis. Donec elementum sem vestibulum arcu sollicitudin volutpat. Vivamus tellus neque, semper vitae fermentum non, placerat ac quam. Integer iaculis euismod felis vel elementum. Aliquam id sodales magna, ut ultrices dolor. Aenean tincidunt feugiat nulla. Duis dignissim arcu at odio tincidunt tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec consectetur ligula. Proin vel nulla consectetur, sollicitudin sem non, suscipit nulla. Aliquam varius sem in lorem pulvinar vulputate. Maecenas quis nisi purus. Pellentesque rutrum at mi nec placerat. In dictum, ante eget bibendum tincidunt, ligula ipsum rutrum ante, eu ultricies felis magna sit amet nibh. Cras facilisis arcu in magna placerat, id sagittis tellus mollis. Suspendisse potenti. Nulla varius elit felis. Sed volutpat ligula quis suscipit lobortis. Nulla facilisi. Aliquam in quam non arcu interdum fermentum mattis eget neque. Sed neque diam, mattis nec varius eget, porta pharetra turpis. Morbi urna tortor, venenatis quis elit ut, vestibulum volutpat lectus. Ut nec sapien tempus, lacinia lectus nec, semper tortor. Vestibulum molestie nec quam dictum gravida. Aliquam at bibendum sem, id hendrerit orci. Curabitur magna nisi, porttitor et vulputate quis, aliquet at odio. Nullam mattis sodales tortor, volutpat mollis libero consectetur eget. Integer dapibus hendrerit lorem, at varius tellus pellentesque non. Vivamus condimentum nulla sit amet enim mattis lacinia. Nam eu massa vestibulum, tincidunt dui sit amet, tempus neque. Ut gravida nisi at purus lacinia, vel gravida nulla suscipit. Suspendisse arcu arcu, imperdiet ut diam vitae, imperdiet auctor mauris. Nunc tincidunt quis enim nec auctor. Aenean euismod nec tortor ut dignissim. Nullam ut eleifend quam, placerat varius purus. Sed lorem diam, congue vel libero eget, dapibus egestas enim. Sed placerat commodo elit vel rutrum. Quisque pretium urna non urna vestibulum pharetra vitae id justo. Integer magna neque, scelerisque in vestibulum non, accumsan quis lectus. Morbi arcu leo, semper vitae rutrum sed, elementum eget ligula. Nullam vitae neque vulputate, luctus turpis at, vulputate ipsum. Suspendisse fringilla, sem eu lacinia ultricies, libero elit lobortis turpis, vel iaculis justo ipsum convallis eros. Integer elementum augue a sem consectetur, sit amet luctus sem vestibulum. Sed id sapien quis nunc dictum sodales. In gravida tellus eu nisl iaculis semper..</p>
    <p>BOTTOM OF RIGHT</p>
</div>

* {
    padding: 0;
    margin: 0;
}
#leftShort {
    background: #eee;
    float:left;
    width:25%;
    text-align:bottom;
}
#rightLong {
    background: #ddd;
    width:75%;
    position:absolute;
    left:25%;
    text-align:center;
}

    $(window).scroll(function () {
        var winTop = $(this).scrollTop(),
            winBottom = winTop + $(this).height(),
            left = $('#leftShort'),
            leftBottom = left.height();
        //when the user reached the bottom of '#leftShort' set its position to fixed to prevent it from moving on scroll
        if (winBottom >= leftBottom) {
            left.css({
                'position': 'fixed',
                'bottom': '0px'
            });
        } else {
            //when the user scrolls back up revert its position to relative
            left.css({
                'position': 'relative',
                'bottom': 'auto'
            });
        }

    });

http://jsfiddle.net/d7BPv/

(из старого вопроса: 2 столбцы - обе прокрутки (левая сторона останавливается со своим содержимым) )

Работает нормально, если необходимо прокрутить оба столбца, но если в коротком столбце слишком мало содержимого, он падает вниз в нижней части страницы, как только прокрутите страницу, как в отредактированном примере ниже: 

<div id="leftShort">left side text
    <p>BOTTOM OF LEFT</p>
</div>
<div id="rightLong">right side text
    <p>Vestibulum molestie nec quam dictum gravida. Aliquam at bibendum sem, id hendrerit orci. Curabitur magna nisi, porttitor et vulputate quis, aliquet at odio. Nullam mattis sodales tortor, volutpat mollis libero consectetur eget. Integer dapibus hendrerit lorem, at varius tellus pellentesque non. Vivamus condimentum nulla sit amet enim mattis lacinia. Nam eu massa vestibulum, tincidunt dui sit amet, tempus neque. Ut gravida nisi at purus lacinia, vel gravida nulla suscipit. Suspendisse arcu arcu, imperdiet ut diam vitae, imperdiet auctor mauris. Nunc tincidunt quis enim nec auctor. Aenean euismod nec tortor ut dignissim. Nullam ut eleifend quam, placerat varius purus. Sed lorem diam, congue vel libero eget, dapibus egestas enim. Sed placerat commodo elit vel rutrum. Quisque pretium urna non urna vestibulum pharetra vitae id justo. Integer magna neque, scelerisque in vestibulum non, accumsan quis lectus. Morbi arcu leo, semper vitae rutrum sed, elementum eget ligula. Nullam vitae neque vulputate, luctus turpis at, vulputate ipsum. Suspendisse fringilla, sem eu lacinia ultricies, libero elit lobortis turpis, vel iaculis justo ipsum convallis eros. Integer elementum augue a sem consectetur, sit amet luctus sem vestibulum. Sed id sapien quis nunc dictum sodales. In gravida tellus eu nisl iaculis semper. Sed non purus mauris. Proin auctor sem ac dui lobortis posuere. Praesent suscipit ipsum vel neque pharetra, ultrices blandit dui ultricies. Pellentesque venenatis dignissim ultrices. Ut ac felis eget massa gravida lobortis. Curabitur eu ultrices libero. Aliquam id quam at eros ullamcorper ultricies. Duis id hendrerit est, eget molestie anteSed non purus mauris. Proin auctor sem ac dui lobortis posuere. Praesent suscipit ipsum vel neque pharetra, ultrices blandit dui ultricies. Pellentesque venenatis dignissim ultrices. Ut ac felis eget massa gravida lobortis. Curabitur eu ultrices libero. Aliquam id quam at eros ullamcorper ultricies. Duis id hendrerit est, eget molestie ante. Fusce urna est, pretium eget fermentum euismod, molestie eu est. Ut id erat dui. Vivamus cursus ultricies nunc, ut posuere lectus congue sit amet. In hac habitasse platea dictumst. Vivamus rhoncus molestie malesuada. Quisque quis lectus tellus. Nulla vitae accumsan nisi, eget placerat turpis. Donec elementum sem vestibulum arcu sollicitudin volutpat. Vivamus tellus neque, semper vitae fermentum non, placerat ac quam. Integer iaculis euismod felis vel elementum. Aliquam id sodales magna, ut ultrices dolor. Aenean tincidunt feugiat nulla. Duis dignissim arcu at odio tincidunt tempus.Sed non purus mauris. Proin auctor sem ac dui lobortis posuere. Praesent suscipit ipsum vel neque pharetra, ultrices blandit dui ultricies. Pellentesque venenatis dignissim ultrices. Ut ac felis eget massa gravida lobortis. Curabitur eu ultrices libero. Aliquam id quam at eros ullamcorper ultricies. Duis id hendrerit est, eget molestie ante. Fusce urna est, pretium eget fermentum euismod, molestie eu est. Ut id erat dui. Vivamus cursus ultricies nunc, ut posuere lectus congue sit amet. In hac habitasse platea dictumst. Vivamus rhoncus molestie malesuada. Quisque quis lectus tellus. Nulla vitae accumsan nisi, eget placerat turpis. Donec elementum sem vestibulum arcu sollicitudin volutpat. Vivamus tellus neque, semper vitae fermentum non, placerat ac quam. Integer iaculis euismod felis vel elementum. Aliquam id sodales magna, ut ultrices dolor. Aenean tincidunt feugiat nulla. Duis dignissim arcu at odio tincidunt tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec consectetur ligula. Proin vel nulla consectetur, sollicitudin sem non, suscipit nulla. Aliquam varius sem in lorem pulvinar vulputate. Maecenas quis nisi purus. Pellentesque rutrum at mi nec placerat. In dictum, ante eget bibendum tincidunt, ligula ipsum rutrum ante, eu ultricies felis magna sit amet nibh. Cras facilisis arcu in magna placerat, id sagittis tellus mollis. Suspendisse potenti. Nulla varius elit felis. Sed volutpat ligula quis suscipit lobortis. Nulla facilisi. Aliquam in quam non arcu interdum fermentum mattis eget neque. Sed neque diam, mattis nec varius eget, porta pharetra turpis. Morbi urna tortor, venenatis quis elit ut, vestibulum volutpat lectus. Ut nec sapien tempus, lacinia lectus nec, semper tortor. Vestibulum molestie nec quam dictum gravida. Aliquam at bibendum sem, id hendrerit orci. Curabitur magna nisi, porttitor et vulputate quis, aliquet at odio. Nullam mattis sodales tortor, volutpat mollis libero consectetur eget. Integer dapibus hendrerit lorem, at varius tellus pellentesque non. Vivamus condimentum nulla sit amet enim mattis lacinia. Nam eu massa vestibulum, tincidunt dui sit amet, tempus neque. Ut gravida nisi at purus lacinia, vel gravida nulla suscipit. Suspendisse arcu arcu, imperdiet ut diam vitae, imperdiet auctor mauris. Nunc tincidunt quis enim nec auctor. Aenean euismod nec tortor ut dignissim. Nullam ut eleifend quam, placerat varius purus. Sed lorem diam, congue vel libero eget, dapibus egestas enim. Sed placerat commodo elit vel rutrum. Quisque pretium urna non urna vestibulum pharetra vitae id justo. Integer magna neque, scelerisque in vestibulum non, accumsan quis lectus. Morbi arcu leo, semper vitae rutrum sed, elementum eget ligula. Nullam vitae neque vulputate, luctus turpis at, vulputate ipsum. Suspendisse fringilla, sem eu lacinia ultricies, libero elit lobortis turpis, vel iaculis justo ipsum convallis eros. Integer elementum augue a sem consectetur, sit amet luctus sem vestibulum. Sed id sapien quis nunc dictum sodales. In gravida tellus eu nisl iaculis semper..</p>
    <p>BOTTOM OF RIGHT</p>
</div>

http://jsfiddle.net/fe3xLo9a/

Есть ли способ изменить чтобы содержимое левого столбца оставалось в верхнем положении страницы, если оно не нуждается в прокрутке?

Я пытался поменять 'bottom' в модификаторе jquery CSS на 'top', но это приводит к невозможности прокрутки левого столбца до конца его содержимого.

...