粘滞侧边栏:向下滚动时粘到底部,向上滚动时粘到顶部

Question

粘滞侧边栏:向下滚动时粘到底部,向上滚动时粘到顶部

and*_*nan 73 jquery position sidebar fixed sticky

我一直在寻找一些解决我的粘性侧边栏问题的方法.我有一个特定的想法,我希望它如何行动; 实际上,当你向下滚动时我希望它坚持到底部,然后一旦你向上滚动我想它以流畅的动作(没有跳跃)粘在顶部.我无法找到我想要实现的示例,因此我创建了一个图像,希望能够更清楚地说明这一点:

边栏位于标题下方.
向下滚动时,侧边栏与页面内容保持同一水平,以便您可以滚动浏览侧边栏和内容.
到达侧边栏的底部,侧边栏粘在视口的底部(大多数插件只允许粘到顶部,一些允许粘到底部不允许两者).
到达底部,侧边栏位于页脚上方.
当您向上滚动时,侧边栏与内容保持一致,因此您可以再次滚动内容和侧边栏.
到达侧边栏的顶部,侧边栏会粘到视口的顶部.
到达顶部,侧边栏位于标题下方.

我希望这是足够的信息.我已经创建了一个jsfiddle来测试任何插件/脚本,我已经重置了这个问题:http://jsfiddle.net/jslucas/yr9gV/2/ .

Answer 1

gmo*_*gmo 20

+1非常漂亮和ilustrative图像.

我知道这是一个老问题,但我随便在forum.jquery.com上发现了同样的问题,并在那里找到了一个答案^{(@ tucker973)},建议一个很好的库来做这个并想在这里分享.

它被@leafo称为粘性套件

github proyect
网页
jsFiddle中的简单示例 ^{(与此处附带的代码段相同的代码)}

在这里,您可以获得我准备的一个非常基本的示例代码以及一个查看结果的工作演示.

/*!
 * Sticky-kit
 * A jQuery plugin for making smart sticky elements
 *
 * Source: http://leafo.net/sticky-kit/
 */

$(function() {
  $(".sidebar").stick_in_parent({
    offset_top: 10
  });
});

Run Code Online (Sandbox Code Playgroud)

* {
  font-size: 10px;
  color: #333;
  box-sizing: border-box;
}
.wrapper,
.header,
.main,
.footer {
  padding: 10px;
  position: relative;
}
.wrapper {
  border: 1px solid #333;
  background-color: #f5f5f5;
  padding: 10px;
}
.header {
  background-color: #6289AE;
  margin-bottom: 10px;
  height: 100px;
}
.sidebar {
  position: absolute;
  padding: 10px;
  background-color: #ccc;
  height: 300px;
  width: 100px;
  float: left;
}
.main {
  background-color: #ccc;
  height: 600px;
  margin-left: 110px;
}
.footer {
  background-color: #6289AE;
  margin-top: 10px;
  height: 250px;
}
.top {
  position: absolute;
  top: 10px;
}
.bottom {
  position: absolute;
  bottom: 10px;
}
.clear {
  clear: both;
  float: none;
}

Run Code Online (Sandbox Code Playgroud)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://leafo.net/sticky-kit/src/jquery.sticky-kit.js"></script>
<div class="wrapper">
  <div class="header"> <a class="top">header top</a>
    <a class="bottom">header bottom</a>

  </div>
  <div class="content">
    <div class="sidebar"> <a class="top">sidebar top</a>
      <a class="bottom">sidebar bottom</a>

    </div>
    <div class="main"> <a class="top">main top</a>
      <a class="bottom">main bottom</a>

    </div>
    <div class="clear"></div>
  </div>
  <div class="footer"> <a class="top">footer top</a>
    <a class="bottom">footer bottom</a>

  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

当然,所有的积分都归到插件的创建者那里,我只做了这个例子来展示它.我需要完成你所追求的相同结果,并发现这个插件非常有用.

Answer 2

Tra*_*ean 10

感谢伟大的图形.我也在寻找这个挑战的解决方案!

遗憾的是,此处发布的其他答案并未涉及要求#5,该要求规定了能够顺利回滚侧栏的能力.

我创建了一个实现所有要求的小提琴:http://jsfiddle.net/bN4qu/5/

需要实施的核心逻辑是:

If scrolling up OR the element is shorter than viewport Then
  Set top of element to top of viewport If scrolled above top of element
If scrolling down then
  Set bottom of element at bottom of viewport If scrolled past bottom of element

Run Code Online (Sandbox Code Playgroud)

在小提琴中,我使用CSS3变换来移动目标元素,因此它不会在例如IE <9中起作用.对于使用不同的方法,逻辑是合理的.

此外,我修改了你的小提琴,以便粘性侧边栏具有渐变背景.这有助于表明正在展示正确的行为.

我希望这对某人有用!

对于寻找答案的任何人，Travis的答案是迄今为止我发现的最完美的答案。谢啦。 (2认同)

Answer 3

Ano*_*aik 10

这是一个如何实现这个的例子:

JavaScript的:

$(function() {

var $window = $(window);
var lastScrollTop = $window.scrollTop();
var wasScrollingDown = true;

var $sidebar = $("#sidebar");
if ($sidebar.length > 0) {

    var initialSidebarTop = $sidebar.position().top;

    $window.scroll(function(event) {

        var windowHeight = $window.height();
        var sidebarHeight = $sidebar.outerHeight();

        var scrollTop = $window.scrollTop();
        var scrollBottom = scrollTop + windowHeight;

        var sidebarTop = $sidebar.position().top;
        var sidebarBottom = sidebarTop + sidebarHeight;

        var heightDelta = Math.abs(windowHeight - sidebarHeight);
        var scrollDelta = lastScrollTop - scrollTop;

        var isScrollingDown = (scrollTop > lastScrollTop);
        var isWindowLarger = (windowHeight > sidebarHeight);

        if ((isWindowLarger && scrollTop > initialSidebarTop) || (!isWindowLarger && scrollTop > initialSidebarTop + heightDelta)) {
            $sidebar.addClass('fixed');
        } else if (!isScrollingDown && scrollTop <= initialSidebarTop) {
            $sidebar.removeClass('fixed');
        }

        var dragBottomDown = (sidebarBottom <= scrollBottom && isScrollingDown);
        var dragTopUp = (sidebarTop >= scrollTop && !isScrollingDown);

        if (dragBottomDown) {
            if (isWindowLarger) {
                $sidebar.css('top', 0);
            } else {
                $sidebar.css('top', -heightDelta);
            }
        } else if (dragTopUp) {
            $sidebar.css('top', 0);
        } else if ($sidebar.hasClass('fixed')) {
            var currentTop = parseInt($sidebar.css('top'), 10);

            var minTop = -heightDelta;
            var scrolledTop = currentTop + scrollDelta;

            var isPageAtBottom = (scrollTop + windowHeight >= $(document).height());
            var newTop = (isPageAtBottom) ? minTop : scrolledTop;

            $sidebar.css('top', newTop);
        }

        lastScrollTop = scrollTop;
        wasScrollingDown = isScrollingDown;
    });
}
});

Run Code Online (Sandbox Code Playgroud)

CSS:

#sidebar {
  width: 180px;
  padding: 10px;
  background: red;
  float: right;
}

.fixed {
  position: fixed;
  right: 50%;
  margin-right: -50%;
}

Run Code Online (Sandbox Code Playgroud)

演示: http ://jsfiddle.net/ryanmaxwell/25QaE/

这在所有场景中都按预期工作,并且在IE中也得到了很好的支持.

Answer 4 · 2013-08-21T21:30:37.000290+08:00

Krz*_*sik 9

双向粘性侧边栏，作者：Krzysztof Antosik。

\n

如果有人需要一个不基于 jQuery 的轻量级解决方案，请随意查看我的代码。

\n

使用脚本很简单。只需将 JavaScript 代码放在页面末尾，然后将属性：添加data-sticky ="true"到侧面板的标记即可。

\n

详细信息可以在 github 上找到：\n GitHub 上的双向 Sticky-Sidebar。

\n

或者我的网站：\n Dwukierunkowy panel boczny \xe2\x80\x93 两个方向粘性侧边栏（仅限波兰语）

\n

尝试工作演示：\n双向粘性侧边栏演示。

\n

\r\n

/**\n * StickySidebar.js\n * A short JavaScript code that allows you to quickly and easily implement a Sticky Sidebar,\n * if the browser\'s viewport is too short, sidebar\'s contents will scroll in the direction\n * the user scrolls and sticks to either top or bottom of the screen when there\'s no more content. \n * And everything with the use of pure JavaScript, \n * thanks to which you we\'ll save redundant code and gain efficiency.\n * -- Krzysztof Antosik\n *\n *\n * @license The MIT License, https://github.com/Krzysztof-Antosik/Two-direction-Sticky-Sidebar/blob/main/LICENSE\n * @version 1.6\n * @author  Krzysztof Antosik, https://github.com/Krzysztof-Antosik/\n * @updated 2023-07-06\n * @link    https://github.com/Krzysztof-Antosik/Two-direction-Sticky-Sidebar/\n *\n *\n */\n\n\n//Sticky element selector..\nconst stickyElement = document.querySelector(`[data-sticky="true"]`),\n\n//..and other constant\nstartPosition = stickyElement.getBoundingClientRect().top;\n\n//Varibles\nvar endScroll = window.innerHeight - stickyElement.offsetHeight - 500,\ncurrPos = window.scrollY,\nscreenHeight = window.innerHeight,\nstickyElementHeight = stickyElement.offsetHeight\ntopGap = 0,\nbottomGap = 0;\n\n//Set Gaps\nsetTimeout(() => {\n    if (stickyElement.hasAttribute(`data-top-gap`)){\n        const dataTopGap = stickyElement.getAttribute(`data-top-gap`);\n        topGap = String(dataTopGap) == "auto" ? startPosition : parseInt(dataTopGap);\n    }\n\n    if (stickyElement.hasAttribute(`data-bottom-gap`)){\n        bottomGap = parseInt(stickyElement.getAttribute(`data-bottom-gap`));\n    }\n}, 100);\n\n//Add required style to sticky element\nstickyElement.style.position = `sticky`;\nstickyElement.style.top = topGap + `px`; \nstickyElement.style.height = "fit-content";\n\n//Main function\nfunction positionStickySidebar() {\n    endScroll = window.innerHeight - stickyElement.offsetHeight - bottomGap;\n    let stickyElementTop = parseInt(stickyElement.style.top.replace(`px;`, ``));\n    if (stickyElementHeight+topGap+bottomGap>screenHeight) {\n        if (window.scrollY < currPos) {\n\n            //Scroll up\n            if (stickyElementTop < topGap) {\n                stickyElement.style.top = (stickyElementTop + currPos - window.scrollY) + `px`;\n            } else if (stickyElementTop >= topGap && stickyElementTop != topGap) {\n                stickyElement.style.top = topGap + `px`;\n            }\n        } else {\n\n            //Scroll down\n            if (stickyElementTop > endScroll) {\n                stickyElement.style.top = (stickyElementTop + currPos - window.scrollY) + `px`;\n            } else if (stickyElementTop < (endScroll) && stickyElementTop != endScroll) {\n                stickyElement.style.top = endScroll + `px`;\n            }\n        }\n    } else {\n        stickyElement.style.top = topGap + `px`;\n    }\n    currPos = window.scrollY;\n}\nfunction stickyElementToMe(){\n    stickyElement.style.top = topGap + `px`;\n}\nfunction updateSticky(){\n    screenHeight = window.innerHeight;\n    stickyElementHeight = stickyElement.offsetHeight;\n    positionStickySidebar();\n}\nsetTimeout(() => {\n    //Check heights of the viewport and the sticky element on window resize and reapply positioning\n    window.addEventListener(`resize`, ()=>{\n        currPos = window.scrollY;\n        updateSticky();\n    });   \n    //Follow the main function when scrolling\n    document.addEventListener(`scroll`, updateSticky, {\n        capture: true,\n        passive: true\n    }); \n}, 1000);

Run Code Online (Sandbox Code Playgroud)\r\n

div {\n  display: flex;\n  align-items: flex-start;\n}\n\nh1 {\n  margin: 0;\n}\n\nheader {\n  width: 100%;\n  text-align: center;\n  background: #1ABC9C;\n}\n\nmain {\n  width: 65%;\n  padding: 0 5%;\n  background: #95A5A6;\n}\n\naside {\n  width: 15%;\n  background: #34495E;\n  padding: 0 5%;\n  text-align: center;\n  position: sticky;\n  top: 0;  \n}\n\nul {\n  list-style: none;\n  padding: 0;\n}\n\nli {\n  height: 40px;\n}

Run Code Online (Sandbox Code Playgroud)\r\n

<html>\n  <body>\n    <header>\n      <h1>\n      Two direction sticky sidebar\n      </h1>\n    </header>\n    <div>\n      <main>\n        <p>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet bibendum enim facilisis gravida neque convallis a. Maecenas sed enim ut sem viverra. Est ultricies integer quis auctor elit sed vulputate. Metus vulputate eu scelerisque felis imperdiet. Pulvinar etiam non quam lacus suspendisse faucibus interdum. Suscipit tellus mauris a diam maecenas sed enim. In est ante in nibh mauris cursus. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl. Eu scelerisque felis imperdiet proin fermentum leo vel. Libero justo laoreet sit amet cursus sit amet dictum. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Nisl condimentum id venenatis a condimentum vitae. Morbi tincidunt augue interdum velit euismod.\n        </p>\n        <p>\n        Sed enim ut sem viverra aliquet eget sit. Nisl pretium fusce id velit ut tortor pretium viverra. Ut consequat semper viverra nam libero justo laoreet sit. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. A diam sollicitudin tempor id eu nisl nunc mi. Tortor at risus viverra adipiscing at in tellus integer. Arcu non sodales neque sodales ut etiam sit amet nisl. Quisque non tellus orci ac auctor augue mauris augue. Urna neque viverra justo nec. Suspendisse ultrices gravida dictum fusce. Tempus imperdiet nulla malesuada pellentesque elit eget gravida.\n        </p>\n        <p>\n        Non curabitur gravida arcu ac. Ac odio tempor orci dapibus ultrices in iaculis nunc sed. Cursus euismod quis viverra nibh cras pulvinar. Risus viverra adipiscing at in. Proin libero nunc consequat interdum varius. In fermentum posuere urna nec tincidunt praesent semper feugiat. Aliquam ut porttitor leo a diam sollicitudin tempor id eu. Amet commodo nulla facilisi nullam vehicula ipsum a arcu. Convallis posuere morbi leo urna. Sit amet luctus venenatis lectus. Amet nisl purus in mollis nunc sed id semper risus. Facilisi etiam dignissim diam quis enim. Massa ultricies mi quis hendrerit dolor. Id leo in vitae turpis massa sed.\n        </p>\n        <p>\n        Lorem ipsum dolor sit amet. Tortor vitae purus faucibus ornare suspendisse sed nisi. Magnis dis parturient montes nascetur ridiculus mus. Turpis in eu mi bibendum neque. Nibh mauris cursus mattis molestie. Diam phasellus vestibulum lorem sed risus ultricies. Nulla pellentesque dignissim enim sit amet venenatis urna. Habitant morbi tristique senectus et netus et malesuada. Feugiat in fermentum posuere urna nec tincidunt praesent. Velit scelerisque in dictum non. Et pharetra pharetra massa massa.\n        </p>\n        <p>\n        Mauris in aliquam sem fringilla ut morbi tincidunt. Non blandit massa enim nec dui nunc. Arcu dictum varius duis at consectetur lorem donec massa. Ullamcorper velit sed ullamcorper morbi tincidunt. Tortor id aliquet lectus proin nibh. Lorem donec massa sapien faucibus et. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Nibh sit amet commodo nulla facilisi nullam. Lectus nulla at volutpat diam ut venenatis tellus in metus. Blandit turpis cursus in hac habitasse platea. Nec feugiat nisl pretium fusce id velit ut tortor pretium. Vitae nunc sed velit dignissim sodales ut eu sem integer. Suspendisse potenti nullam ac tortor. Augue eget arcu dictum varius duis at consectetur lorem donec.\n        </p>\n        <p>\n        Sed augue lacus viverra vitae. Vestibulum rhoncus est pellentesque elit. Egestas sed sed risus pretium quam vulputate dignissim. Ante metus dictum at tempor. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Donec enim diam vulputate ut pharetra sit amet. Potenti nullam ac tortor vitae purus. Lacinia quis vel eros donec ac. Fames ac turpis egestas maecenas pharetra convallis. At ultrices mi tempus imperdiet nulla malesuada. Ut ornare lectus sit amet est placerat in egestas. Ultricies leo integer malesuada nunc vel. Congue quisque egestas diam in arcu cursus euismod quis.\n        </p>\n        <p>\n        Parturient montes nascetur ridiculus mus mauris vitae ultricies leo. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Sollicitudin ac orci phasellus egestas tellus rutrum. Libero justo laoreet sit amet cursus sit amet dictum sit. Et odio pellentesque diam volutpat commodo sed. A lacus vestibulum sed arcu non odio euismod. Eget aliquet nibh praesent tristique. Luctus accumsan tortor posuere ac ut. Condimentum vitae sapien pellentesque habitant. Tincidunt augue interdum velit euismod. Tortor condimentum lacinia quis vel eros donec ac odio tempor. Accumsan sit amet nulla facilisi morbi. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Dui faucibus in ornare quam viverra. Gravida cum sociis natoque penatibus et. Pellentesque sit amet porttitor eget dolor. Libero nunc consequat interdum varius sit amet mattis vulputate enim. Turpis massa tincidunt dui ut ornare lectus sit.\n        </p>\n        <p>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet bibendum enim facilisis gravida neque convallis a. Maecenas sed enim ut sem viverra. Est ultricies integer quis auctor elit sed vulputate. Metus vulputate eu scelerisque felis imperdiet. Pulvinar etiam non quam lacus suspendisse faucibus interdum. Suscipit tellus mauris a diam maecenas sed enim. In est ante in nibh mauris cursus. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl. Eu scelerisque felis imperdiet proin fermentum leo vel. Libero justo laoreet sit amet cursus sit amet dictum. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Nisl condimentum id venenatis a condimentum vitae. Morbi tincidunt augue interdum velit euismod.\n        </p>\n        <p>\n        Sed enim ut sem viverra aliquet eget sit. Nisl pretium fusce id velit ut tortor pretium viverra. Ut consequat semper viverra nam libero justo laoreet sit. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. A diam sollicitudin tempor id eu nisl nunc mi. Tortor at risus viverra adipiscing at in tellus integer. Arcu non sodales neque sodales ut etiam sit amet nisl. Quisque non tellus orci ac auctor augue mauris augue. Urna neque viverra justo nec. Suspendisse ultrices gravida dictum fusce. Tempus imperdiet nulla malesuada pellentesque elit eget gravida.\n        </p>\n        <p>\n        Non curabitur gravida arcu ac. Ac odio tempor orci dapibus ultrices in iaculis nunc sed. Cursus euismod quis viverra nibh cras pulvinar. Risus viverra adipiscing at in. Proin libero nunc consequat interdum varius. In fermentum posuere urna nec tincidunt praesent semper feugiat. Aliquam ut porttitor leo a diam sollicitudin tempor id eu. Amet commodo nulla facilisi nullam vehicula ipsum a arcu. Convallis posuere morbi leo urna. Sit amet luctus venenatis lectus. Amet nisl purus in mollis nunc sed id semper risus. Facilisi etiam dignissim diam quis enim. Massa ultricies mi quis hendrerit dolor. Id leo in vitae turpis massa sed.\n        </p>\n        <p>\n        Lorem ipsum dolor sit amet. Tortor vitae purus faucibus ornare suspendisse sed nisi. Magnis dis parturient montes nascetur ridiculus mus. Turpis in eu mi bibendum neque. Nibh mauris cursus mattis molestie. Diam phasellus vestibulum lorem sed risus ultricies. Nulla pellentesque dignissim enim sit amet venenatis urna. Habitant morbi tristique senectus et netus et malesuada. Feugiat in fermentum posuere urna nec tincidunt praesent. Velit scelerisque in dictum non. Et pharetra pharetra massa massa.\n        </p>\n        <p>\n        Mauris in aliquam sem fringilla ut morbi tincidunt. Non blandit massa enim nec dui nunc. Arcu dictum varius duis at consectetur lorem donec massa. Ullamcorper velit sed ullamcorper morbi tincidunt. Tortor id aliquet lectus proin nibh. Lorem donec massa sapien faucibus et. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Nibh sit amet commodo nulla facilisi nullam. Lectus nulla at volutpat diam ut venenatis tellus in metus. Blandit turpis cursus in hac habitasse platea. Nec feugiat nisl pretium fusce id velit ut tortor pretium. Vitae nunc sed velit dignissim sodales ut eu sem integer. Suspendisse potenti nullam ac tortor. Augue eget arcu dictum varius duis at consectetur lorem donec.\n        </p>\n        <p>\n        Sed augue lacus viverra vitae. Vestibulum rhoncus est pellentesque elit. Egestas sed sed risus pretium quam vulputate dignissim. Ante metus dictum at tempor. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Donec enim diam vulputate ut pharetra sit amet. Potenti nullam ac tortor vitae purus. Lacinia quis vel eros donec ac. Fames ac turpis egestas maecenas pharetra convallis. At ultrices mi tempus imperdiet nulla malesuada. Ut ornare lectus sit amet est placerat in egestas. Ultricies leo integer malesuada nunc vel. Congue quisque egestas diam in arcu cursus euismod quis.\n        </p>\n        <p>\n        Parturient montes nascetur ridiculus mus mauris vitae ultricies leo. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Sollicitudin ac orci phasellus egestas tellus rutrum. Libero justo laoreet sit amet cursus sit amet dictum sit. Et odio pellentesque diam volutpat commodo sed. A lacus vestibulum sed arcu non odio euismod. Eget aliquet nibh praesent tristique. Luctus accumsan tortor posuere ac ut. Condimentum vitae sapien pellentesque habitant. Tincidunt augue interdum velit euismod. Tortor condimentum lacinia quis vel eros donec ac odio tempor. Accumsan sit amet nulla facilisi morbi. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Dui faucibus in ornare quam viverra. Gravida cum sociis natoque penatibus et. Pellentesque sit amet porttitor eget dolor. Libero nunc consequat interdum varius sit amet mattis vulputate enim. Turpis massa tincidunt dui ut ornare lectus sit.\n        </p>\n        <p>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet bibendum enim facilisis gravida neque convallis a. Maecenas sed enim ut sem viverra. Est ultricies integer quis auctor elit sed vulputate. Metus vulputate eu scelerisque felis imperdiet. Pulvinar etiam non quam lacus suspendisse faucibus interdum. Suscipit tellus mauris a diam maecenas sed enim. In est ante in nibh mauris cursus. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl. Eu scelerisque felis imperdiet proin fermentum leo vel. Libero justo laoreet sit amet cursus sit amet dictum. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Nisl condimentum id venenatis a condimentum vitae. Morbi tincidunt augue interdum velit euismod.\n        </p>\n        <p>\n        Sed enim ut sem viverra aliquet eget sit. Nisl pretium fusce id velit ut tortor pretium viverra. Ut consequat semper viverra nam libero justo laoreet sit. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. A diam sollicitudin tempor id eu nisl nunc mi. Tortor at risus viverra adipiscing at in tellus integer. Arcu non sodales neque sodales ut etiam sit amet nisl. Quisque non tellus orci ac auctor augue mauris augue. Urna neque viverra justo nec. Suspendisse ultrices gravida dictum fusce. Tempus imperdiet nulla malesuada pellentesque elit eget gravida.\n        </p>\n        <p>\n        Non curabitur gravida arcu ac. Ac odio tempor orci dapibus ultrices in iaculis nunc sed. Cursus euismod quis viverra nibh cras pulvinar. Risus viverra adipiscing at in. Proin libero nunc consequat interdum varius. In fermentum posuere urna nec tincidunt praesent semper feugiat. Aliquam ut porttitor leo a diam sollicitudin tempor id eu. Amet commodo nulla facilisi nullam vehicula ipsum a arcu. Convallis posuere morbi leo urna. Sit amet luctus venenatis lectus. Amet nisl purus in mollis nunc sed id semper risus. Facilisi etiam dignissim diam quis enim. Massa ultricies mi quis hendrerit dolor. Id leo in vitae turpis massa sed.\n        </p>\n        <p>\n        Lorem ipsum dolor sit amet. Tortor vitae purus faucibus ornare suspendisse sed nisi. Magnis dis parturient montes nascetur ridiculus mus. Turpis in eu mi bibendum neque. Nibh mauris cursus mattis molestie. Diam phasellus vestibulum lorem sed risus ultricies. Nulla pellentesque dignissim enim sit amet venenatis urna. Habitant morbi tristique senectus et netus et malesuada. Feugiat in fermentum posuere urna nec tincidunt praesent. Velit scelerisque in dictum non. Et pharetra pharetra massa massa.\n        </p>\n        <p>\n        Mauris in aliquam sem fringilla ut morbi tincidunt. Non blandit massa enim nec dui nunc. Arcu dictum varius duis at consectetur lorem donec massa. Ullamcorper velit sed ullamcorper morbi tincidunt. Tortor id aliquet lectus proin nibh. Lorem donec massa sapien faucibus et. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Nibh sit amet commodo nulla facilisi nullam. Lectus nulla at volutpat diam ut venenatis tellus in metus. Blandit turpis cursus in hac habitasse platea. Nec feugiat nisl pretium fusce id velit ut tortor pretium. Vitae nunc sed velit dignissim sodales ut eu sem integer. Suspendisse potenti nullam ac tortor. Augue eget arcu dictum varius duis at consectetur lorem donec.\n        </p>\n        <p>\n        Sed augue lacus viverra vitae. Vestibulum rhoncus est pellentesque elit. Egestas sed sed risus pretium quam vulputate dignissim. Ante metus dictum at tempor. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Donec enim diam vulputate ut pharetra sit amet. Potenti nullam ac tortor vitae purus. Lacinia quis vel eros donec ac. Fames ac turpis egestas maecenas pharetra convallis. At ultrices mi tempus imperdiet nulla malesuada. Ut ornare lectus sit amet est placerat in egestas. Ultricies leo integer malesuada nunc vel. Congue quisque egestas diam in arcu cursus euismod quis.\n        </p>\n        <p>

归档时间：	12 年，2 月前
查看次数：	38380 次
最近记录：	7 年，7 月前