JS Fiddle

Question

我正在寻找一个直接浮动在我的内容列旁边的粘性侧边栏。它将用于在页面上保留跳转链接，类似于此page，但导航按钮将直接位于内容列的旁边。

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

我想尽可能只使用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

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

你的小提琴中有一个小问题，固定列表没有出现，但你应该能够用<ul>元素本身的几个样式来修复它。

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

请参阅更新：http://jsfiddle.net/KgKq4/3/

我不知道你还有什么想要发生的事吗？如果是这样，请告诉我，我会尽可能地更新这个答案。

<强>更新

将此侧边栏置于其他内容旁边的方法可能会因您的情况而异。

就你所创造的小提琴而言，这是一个简单的计算：

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

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

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

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

如果内容的宽度是百分比而侧边栏是固定宽度，则有两个选项取决于您所需的浏览器支持。基本上，您需要动态计算要移动的金额，这样如果宽度发生变化，侧边栏就会相应移动。

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

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

可以执行简单的评估以确定所需的保证金。

第二个选项是用javascript做同样的事情。

如果内容的宽度未知，并且您无法计算它，则第二个选项也适用。（但这几乎总是可以避免）。

我将用jQuery演示，因为我比纯JS更熟悉它：

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

我希望有帮助

粘贴的侧边栏直接浮动在内容旁边，由js插入

HTML

CSS

JS

JS Fiddle

1 个答案: