jQuery : 페이지에 항상 뷰 요소 유지하기 : 예제, 구현

웹 디자인의 일반적인 추세는 페이지를 아래로 스크롤 할 때 내용을 이동시켜 중요한 내용이 항상 화면에 표시되도록하는 것입니다. 많은 웹 사이트에서 원하는 정보를 사용하여이 작업을 수행 할 수 있으며, 일부는 상단 탐색에 사용하고, 일부는이 기능을 사용하여 소셜 미디어 단추를 표시하고, 일부는 메일 목록 구독 상자를 항상 볼 수 있도록합니다.

 

 

 

Hongkiat 웹 사이트

웹 디자인 웹 사이트 Hongkiat은 이 기능을 사용하여 로고, 소셜 미디어 공유 버튼 및 검색 상자를 항상 방문자에게 보여줍니다. 이를 통해 방문자는 페이지의 어느 곳에서나 현재 페이지를 항상 공유 할 수 있습니다. 웹 사이트 로고는 홈페이지로 돌아가는 링크이며 검색 상자를 통해 방문자는 항상 페이지의 어느 곳에서든 주제를 검색 할 수 있습니다. 아래 이미지는 표준 상단 탐색입니다.

Hongkiat 웹 사이트

 

탐색 막대를 스크롤하면 이것으로 바뀝니다.

Hongkiat 웹 사이트

 

 

 

프리미엄 픽셀 Love it 버튼

프리미엄 픽셀 Love it 버튼

 

프리미엄 픽셀은 영국의 그래픽 디자이너인 Orman Clark의 무료 PSD 리소스입니다. Orman은 고품질의 PSD를 만들어 웹 사이트 프리미엄 픽셀에서 무료로 제공합니다. 이 사이트에서 사람들은 love it 버튼을 클릭하여 사람들이 자신이 제공하는 PSD를 좋아한다고 말할 수 있습니다. 프리미엄 픽셀은 love it 버튼의 보기 기능에서 항상 동일하게 사용합니다. 페이지를 아래로 스크롤하면 love it 버튼이 항상 화면 상단에 유지됩니다.

 

 

 

보기 유지 소셜 버튼

항상보기 요소는 소셜 미디어 버튼에 대해 이야기해야합니다. 거의 모든 사이트에는 플로팅 소셜 미디어 버튼이 있으며 화면을 아래로 스크롤하면 항상 볼 수 있습니다. 콘텐츠 왼쪽에 표시되므로 사람들은 항상 페이지의 어느 곳에서나 즐겨 사용하는 소셜 미디어 네트워크에서 현재 페이지를 공유 할 수 있습니다. 이 기능을 위해 Wordpress 플러그인 Digg Digg를 사용할 수 있습니다.

보기 유지 소셜 버튼

 

Buffer by Digg Digg를 사용하면 블로그를 위한 하나의 소셜 공유 플러그인이 있습니다. 블로그에 모든 소셜 공유 버튼을 표시하고 만드십시오. Wordpress.org로 이동하여 무료로 다운로드 할 수 있습니다.

 

 

 

View.js에 유지

keep-in-view.js라는 이 Github 프로젝트를 우연히 발견했습니다. keep-in-view.js는 약간의 Javascript를 사용하여 요소가 항상 화면에 표시되도록합니다. 보기를 유지하면 요소가 페이지의 맨 위나 맨 아래에 붙어서 페이지가 스크롤되지 않도록합니다. Github에서 프로젝트를 봅니다.

 

 

 

View In View 사용

keepInView를 사용하려면 프로젝트를 다운로드하여 페이지에 포함시키기 만하면 됩니다. 그러나 페이지에 jQuery도 포함시켜야합니다. 그렇지 않으면 제대로 작동하지 않습니다. 이것들이 페이지에 포함 된 후에는 페이지의 어떤 요소를 끈적 거리고 항상 볼 수 있게 하는 것이 매우 쉽습니다. 요소에서 keepInView 함수를 사용하기만하면 됩니다.

 

$("nav").keepInView();

 

이렇게 하면 탐색 태그의 요소가 항상 페이지에서 볼 수 있습니다. keepInView 함수에는 스티커 요소를 사용자 정의하는 데 사용할 수 있는 여러 선택적 매개 변수가 있습니다. 기본값으로 false입니다. true로 설정하면 이 요소는 스크롤 위치에 관계없이 고정됩니다.

edgeOffset-기본적으로 0입니다. 이것은 상단 또는 하단에 대한 오프셋으로 표시됩니다.
zIndex-기본적으로 1입니다. 이 요소의 CSS zindex 설정을 무시합니다.

 

 

 

뷰 유지하기 데모

이 데모에서는 페이지 상단에 탐색 기능이 있는 간단한 웹 페이지를 작성하려고 했으며 ,이 탐색은 Keep in View 플러그인을 사용하여 페이지 상단에 고정됩니다. 페이지가 충분히 길어 페이지를 아래로 스크롤하고 페이지 상단의 탐색 스틱을 볼 수 있도록 더미 컨텐츠를 작성하려고 합니다. 또한 가입 상자가 항상 화면에 표시되도록 keepInView.js를 사용할 사이드 바에 가입 상자를 추가 할 것입니다.

<article class="content">
        <h1>Too much text</h1>
        <img src="images/Sticky Notes.jpg" class="stickyImages" />
        <p><strong>Resize and scroll the window so that you can see the script keeping elements in view.</strong></p>
        <h4>JavaScript init:</h4>
        &lt;script type="text/javascript"&gt;
    $(document).ready(function(){
        $(".help").keepInView({fixed:true, zindex: 42, edgeOffset: 30});
        $("nav, footer p").keepInView();
    });
&lt;/script&gt;

        <h2 class=sticky>Sticky Header</h2>
        <p>Trigger the 'unstick' event on the element you no longer want to keep in view.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h2>And it just keeps on going</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h3>… and going and going</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </article>

    <aside>
        <div class="subscribe-box">
            <h3>Subscribe to stay updated</h3>
            <p><input type=email placeholder=Enter email address /></p>
            <p><input type=submit value=Subscribe /></p>
        </div>

    </aside>

        <div style="clear: both; "></div>

 

보기에는 jQuery 플러그인이 있으므로 이 플러그인과 jquery를 모두 페이지에 추가해야 합니다. 프로젝트에서 동일한 디렉토리에 보기로 유지 프로젝트를 저장하고 페이지의 헤드 섹션에 다음을 추가하십시오.

 

 

 

 

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="keepinview.js"></script>
</head>

이것들을 페이지에 추가하면 이제 플러그인을 사용하여 특정 HTML 요소를 볼 수 있게 하고 페이지에 다음 자바 스크립트를 추가하여 탐색 및 가입 상자를 페이지에서 볼 수 있습니다.

 

<script>
$(document).ready(function(){
        // Keep the navigation in view  
    $("nav").keepInView();

        // Make sure the stick header is always in view with an offset of 40 pixels from the top
    $(".sticky").keepInView({edgeOffset:40});

        // Keep the subscribe box in view 80 pixels from the top with a zIndex of 20
    $(".subscribe-box").keepInView({edgeOffset:80, zIndex:20}); 
});
</script>

데모 페이지의 모든 요소를 방문자에게 표시하는 것은 간단합니다. 웹 페이지에서 계속보고 싶은 중요한 요소가 있으면 keepInView.js를 사용해보십시오. Github에서 다운로드 할 수 있습니다.