0

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

需要注意的是，这个侧边栏的 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小提琴

任何想法将不胜感激！

4

1 回答 1

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');

我希望这会有所帮助

于 2013-10-19T01:33:38.940 回答