페이지의 세로 막대를 위나 아래로 이동하는 방법은 무엇입니까?

아래 그림과 같은 블로그 페이지가 있습니다. 페이지를 위로 또는 아래로 페이지로 블로그 게시물간에 전환하고 싶습니다. 이 목적을 위해 javascript를 만들었지 만 사이드 바를 위아래로 전환하는 방법을 알지 못합니다.페이지의 세로 막대를 위나 아래로 이동하는 방법은 무엇입니까?

페이지 템플릿

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

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

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

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

내가을 페이지를 아래로 누를 때마다, 나는 헤더 + 블로그 약 2 사이드를 취해야한다; 내가 페이지 아래로 다시 누르면 그 후, 나는 페이지 아래로

|---------------------| | blog 1 | | | |---------------------| |---------------------------------| | header | | | |---------------------------------| |---------------------| |--------| | blog 2 | | side | | | | bar | |---------------------| |--------| |---------------------| | blog 3 | | | |---------------------|

내 자바 스크립트 코드를 블로그 3.

그림 주위 헤더 + 사이드 바를 취해야한다;

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>

출처

2014-09-16 Hevan

JQuery와는 [.keypress() (http://api.jquery.com/keypress/) 및 [.remove() (http://api.jquery.com/remove/) – ltotally

을 갖는다 http://css-tricks.com/scrollfollow-sidebar/를 참조하십시오. 나는 이것이 당신이 원하는 것이라고 생각합니다. 여기에 [데모] (http://css-tricks.com/examples/ScrollingSidebar/) – Manwal

시도 위치 : 스티커; – MindlessRanger

이것은 당신이 어떤 방향을 얻을 수 있도록

는 퍼팅에서 작동하는 것이 단지 포인터, 완전한 해결책이 아니다.

Jquery 플러그인을 사용하여 끈적한 헤더 및 사이드 바를 가져 오거나 요구 사항에 따라 사용자 지정 기능을 직접 빌드 할 수 있습니다. 저는이 방법을 끈끈한 사이드 바가 필요한 프로젝트에서 사용했습니다.

1 단계 : 헤더와 사이드 바의 위치를 모두 확인 : 절대, 당신이 당신의 페이지의 모든 콘텐츠에 대해 부모 래퍼 컨테이너가 필요합니다,이 래퍼 위치해야한다 : 상대

.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 속성을 사용하여 창이 수직으로 스크롤 된 양을 가져옵니다. 초기 0 값부터 시작합니다.

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

출처

2014-09-17 10:41:37 Sanjeev

페이지의 세로 막대를 위나 아래로 이동하는 방법은 무엇입니까?

답변

관련 문제