Question

我有一个如下所示的博客页面。我想在页面向上或向下翻页按钮之间切换博客帖子。我已经为此目的创建了javascript，但我不知道如何向上或向下切换侧边栏。

页面模板

|---------------------------------|
|        header                   |
|---------------------------------|

|---------------------|  |--------|
|   blog 1            |  | side   |
|                     |  |    bar |
|---------------------|  |--------|

|---------------------|
|   blog 2            |
|                     |
|---------------------|

|---------------------|
|  blog 3             |
|                     |
|---------------------|

每当我按下页面时，我应该在博客2周围使用标题+侧边栏;之后，如果我再次按页面向下，我应该在博客3周围使用标题+侧边栏。

插图，在页面上

|---------------------|
|   blog 1            |
|                     |
|---------------------|

|---------------------------------|
|        header                   |
|                                 |
|---------------------------------|

|---------------------|  |--------|
|   blog 2            |  | side   |
|                     |  |    bar |
|---------------------|  |--------|

|---------------------|
|  blog 3             |
|                     |
|---------------------|

我的Javascript代码;

var documentOrder = 0;

function prepareEventHandlers(){
    var blogs = document.getElementsByClassName("blogBox");

    // What should I write to move sidebar and header?

    documentOrder = documentOrder + 1 ;
}

window.onload = function () {
    prepareEventHandlers();
}

我的网页正文;

<body>
    <span id="top"></span>
    <div id="wrapper" class="auto-style2" style="width: 1340px">

        <div class="blankHeader h120 w1180"></div>

        <div id="sidebar"> 
        </div>


        <div id="allBlogPosts">
            <div id="blog1" class="blogBox">
            </div>

            <div id="blog2" class="blogBox">
            </div>

            <div id="blog3" class="blogBox">
            </div>
        </div>
    </div> 
</body>

Answer 1

这不是一个完整的解决方案，它只是一个指针供您使用

这样做可以让你获得一些指导。

您可以使用Jquery插件来获取粘性标题和侧边栏，也可以尝试根据您的要求构建自己的自定义功能。我在我的一个项目中使用了这种方法，我们需要粘贴边栏并且效果很好。

步骤1：使标题和侧栏都位于：绝对，你需要一个父包装容器来处理页面上的所有内容，这个包装器应该是position：relative

.wrapperContainer{
position:relative
}

.header{
position:absolute;
top:0; /*Default top can get changed as per your case*/
left:0;
}

.sidebar{
position:absolute;
top:100px;/*Default top can get changed as per your case*/
right:0;
}

步骤2：在你的JS添加处理程序中滚动窗口事件，并在页面滚动时更改页眉和侧边栏的顶部位置。使用window.pageYOffset属性来获取窗口垂直滚动的程度，它从初始零值开始。

var windowScrolled = 0, 
    verticalHeaderOffset = 0,
    verticalSidebarOffset = 0,
// These offsets will depend on you requirements, they can be any +ve/-ve number as per your case

$(window).on("scroll", function(){
windowScrolled = window.pageYOffset;
if(windowScrolled > 0){
    $( ".header" ).animate({top: (windowScrolled + verticalHeaderOffset )}, 1000, function() {
        // Animation complete, you can remove this whole function handler if not needed
      });
    $( ".sidebar" ).animate({top: (windowScrolled + verticalSidebarOffset )}, 1000, function() {
        // Animation complete, you can remove this whole function handler if not needed
      });
}
else{
    $( ".header" ).animate({top: 0}, 1000); // Reset to initial value
    $( ".sidebar" ).animate({top: 100)}, 1000);  // Reset to initial value
}
});

如何在页面向上或向下移动侧边栏？

1 个答案: