javascript - 直接 float 在内容旁边的粘性侧边栏，由 js 插入

Question

我想创建一个紧挨着我的内容栏的粘性侧边栏。它将用于保存页面上的跳转链接，类似于此page但导航按钮将紧挨着内容列。

需要注意的是，这个侧边栏的 HTML 将通过 javascript 添加(这是一个更大的 JS 插件的一部分)，所以我不能依赖于将侧边栏 float 在内容旁边。

如果可能，我想只使用 CSS。如果不是，JS 越少越好。

这是我到目前为止所得到的:

HTML

<!-- Main Section -->
<section class="main green">
    <div class="inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, nesciunt, dolores eveniet quia commodi velit alias consequatur asperiores possimus ipsum quasi dicta sit maxime. Voluptatum provident a voluptate sequi impedit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, temporibus, molestiae id non quidem vitae at placeat consequuntur in aspernatur incidunt officia facere ad odit harum itaque aperiam fugiat quaerat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, obcaecati, maiores, harum porro aut quidem ullam voluptatibus molestias perspiciatis fugit voluptas adipisci repudiandae accusamus cum deserunt? Quas, praesentium ipsam neque!</p>
    </div>
</section>
<!-- /Main Section -->

<!-- Main Section -->
<section class="main">
    <div class="inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, nesciunt, dolores eveniet quia commodi velit alias consequatur asperiores possimus ipsum quasi dicta sit maxime. Voluptatum provident a voluptate sequi impedit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, temporibus, molestiae id non quidem vitae at placeat consequuntur in aspernatur incidunt officia facere ad odit harum itaque aperiam fugiat quaerat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, obcaecati, maiores, harum porro aut quidem ullam voluptatibus molestias perspiciatis fugit voluptas adipisci repudiandae accusamus cum deserunt? Quas, praesentium ipsam neque!</p>
    </div>
</section>
<!-- /Main Section -->

<!-- Main Section -->
<section class="main green">
    <div class="inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, nesciunt, dolores eveniet quia commodi velit alias consequatur asperiores possimus ipsum quasi dicta sit maxime. Voluptatum provident a voluptate sequi impedit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, temporibus, molestiae id non quidem vitae at placeat consequuntur in aspernatur incidunt officia facere ad odit harum itaque aperiam fugiat quaerat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, obcaecati, maiores, harum porro aut quidem ullam voluptatibus molestias perspiciatis fugit voluptas adipisci repudiandae accusamus cum deserunt? Quas, praesentium ipsam neque!</p>
    </div>
</section>
<!-- /Main Section -->

<!-- Main Section -->
<section class="main">
    <div class="inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, nesciunt, dolores eveniet quia commodi velit alias consequatur asperiores possimus ipsum quasi dicta sit maxime. Voluptatum provident a voluptate sequi impedit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, temporibus, molestiae id non quidem vitae at placeat consequuntur in aspernatur incidunt officia facere ad odit harum itaque aperiam fugiat quaerat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, obcaecati, maiores, harum porro aut quidem ullam voluptatibus molestias perspiciatis fugit voluptas adipisci repudiandae accusamus cum deserunt? Quas, praesentium ipsam neque!</p>
    </div>
</section>
<!-- /Main Section -->

CSS

.main{ background:gray; }
.green{ background: green; }
.inner{
    width:300px;
    margin:0 auto;
    padding: 10px;
}

.pageNavigation{
    position: fixed;
    width: 25px;
    top: 50%;
    right: 5%;
}
.pageNavigation li{
    list-style:none;
    margin: 5px 0;
    background: #ddd;
}
.pageNavigation a{
    display: block;
    padding: 5px;
    text-align: center;
}

JS

(function sidebarNav(){
    sidebarHTML =  '<nav class="pageNavigation">';
    sidebarHTML += '<ul>';    
    sidebarHTML += '<li><a href="#">1</a></li>';
    sidebarHTML += '<li><a href="#">2</a></li>';
    sidebarHTML += '<li><a href="#">3</a></li>';
    sidebarHTML += '</ul>';
    sidebarHTML += '</nav>';
    $('body').append(sidebarHTML);
})();

JS Fiddle

任何想法将不胜感激!

Answer 1

据我所知，你基本上已经得到了你想要的一切。

你的 fiddle 中有一个小问题，固定列表没有显示，但你应该能够通过 <ul> 上的一些样式来解决这个问题。元素本身。

.pageNavigation ul {
    width: 100%;
    padding: 0;
    margin: 0;
}

查看更新:http://jsfiddle.net/KgKq4/3/

我不知道您是否还有其他想要发生的事情？如果是这样，请告诉我，我会尽可能更新此答案。

更新

根据您的情况，将此侧边栏放置在其余内容旁边的方法可能会有所不同。

就您创建的 fiddle 而言，这是一个简单的计算:

right: 50%;
margin-right: -185px;

您将侧边栏推到屏幕中央，然后使用边距将其拉回内容宽度的一半，加上侧边栏的宽度，再加上您可能需要的任何额外间距。

http://jsfiddle.net/KgKq4/4/

如果侧边栏的宽度未知，您可以从左侧插入而不是从右侧插入。这样，无论宽度如何，它都会从您希望它静止的点向外延伸。

如果内容的宽度是百分比，侧边栏是固定宽度，您有两个选项，具体取决于您所需的浏览器支持。本质上，您需要动态计算要移动的量，以便如果宽度发生变化，侧边栏也会相应地移动。

第一个选项，支持较少，是 CSS' calc()

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

它可以执行简单的评估来计算出所需的 margin 。

第二种选择是用 javascript 做同样的事情。

第二个选项也适用于内容宽度未知且您无法计算的情况。 (然而，这几乎总是可以避免的)。

我将使用 jQuery 进行演示，因为我对它比纯 JS 更熟悉:

var margin = -($('.inner').width() + $('.pageNavigation').width() + 15));
$('.pageNavigation').css('margin-right',margin+'px');

希望对你有帮助