JQUERY는 창 스크롤 검색 상자 도킹 효과를 구현합니다(스크롤 도킹과 유사)_jquery

페이지에 많은 내용을 표시해야 할 때 우리 중 많은 사람들은 문제를 해결하기 위해 페이징을 사용합니다.

가끔 페이징 효과가 매우 짜증날 때가 있습니다. 스크롤 막대는 의심할 여지 없이 간단하고 효율적인 방법입니다. 여기서는 사용자 경험을 위해 Jquery를 사용하여 "스크롤 도킹"과 유사한 효과를 얻었습니다. 이런 방식으로 콘텐츠를 아래로 스크롤하면 검색 상자가 창 상단에 "정지(도킹)"됩니다.

이것의 장점은 사용자가 콘텐츠를 다시 필터링해야 할 때 다시 스크롤할 필요 없이 언제든지 조건을 입력하여 검색할 수 있다는 것입니다.

이 효과를 얻기 위한 내 생각은 다음과 같습니다:
먼저 숨겨진 검색창을 디자인합니다. 숨겨진 검색창의 스타일과 이벤트는 표시된 검색창의 스타일과 이벤트와 동일합니다.
그런 다음 숨겨진 검색창의 위치를 ​​'절대'로 설정하세요.
셋째, Jquery를 사용하여 스크롤 막대의 스크롤 거리로 인해 원래 표시된 검색 상자가 보이지 않는지 확인하고 숨겨진 검색 상자를 상단에 고정하여 표시합니다.

다음은 이 효과에 대한 일부 코드입니다:
플로팅 검색 상자 HTML 코드: (표시되는 검색 상자는 이와 동일하지만 클래스가 다릅니다.)

코드 복사 코드는 다음과 같습니다.

< table class="flowsearch">

조건 1: 조건">



조건 2:



조건 3: td class="condition ">

;
< ;td class="conditionname">
/td>

표시되는 검색 상자는 고정 위치를 설정하지 않는 것을 제외하면 이 스타일과 동일)

코드 복사

코드는 다음과 같습니다. /*드롭다운 상자*/ .drop { width: 175px

}

/*플로팅 검색 상자의 테이블*/
#flowsearchdiv 테이블
{
배경 색상: # 484343;
색상: 흰색;
테두리 상단: 2px 단색 흰색
/*부동 검색 상자*/
# flowsearchdiv
{
display:none ;
위치:절대;
left:217px
}


Jquery 코드:




코드 복사

코드는 다음과 같습니다.

//창 스크롤 인식, 검색창은 스크롤되지 않습니다$( function () { $(window).scroll(function ( ) { var top = $(this).scrollTop(); var flowSearch = $("#flowsearchdiv");

if (top - 36 < 0) {

//Float 검색 상자가 숨겨지고 페이드 인됩니다.
flowSearch.css("display", "none")
} else {
flowSearch.css("display", "block");
top = top 40; flowSearch.css("top", top)

});


여기서는 기본적으로 효과가 나옵니다. 스크롤 막대를 아래로 스크롤할 때 원래 검색창이 페이지의 표시 범위를 초과하면 숨겨진 검색창이 표시됩니다. 사용자의 관점에서 검색창은 페이지 상단에 위치하므로 사용자 경험이 자명합니다.
렌더링: