윅스 (Wix) 코딩 강의 초급 (Beginner) - 상단 고정 메뉴 만들기 (Sticky Header) - 상호작용 (Interaction)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 상단 고정 메뉴 만들기 (Sticky Header) - 상호작용 (Interaction)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 상단 고정 메뉴 만들기 (Sticky Header) - 상호작용 (Interaction)

강의 내용 요약

다음의 예제는 Wix 윅스 무료 홈페이지 만들기의 자바스크립트 (Javascript) 코딩 기능을 활용할 수 있는 Corvid by Wix (윅스 코딩 - 콜비드) 를 활용하여 만듭니다.

 

방문자가 웹사이트를 스크롤할때 상단에 고정되어 있는 메뉴를 만듭니다.

 

 

 

예제 보러가기 (View Example)

Home | Sticky Header

 

예제 에디터 확인하기 (Edit Now)

Log In | Wix

 

 

강의 내용 만드는법

만들고자 하는 윅스 사이트에 다음과 같은 구성 요소들이 필요합니다.

• 클래식 스트립 구성요소 2개

 

코드 (Code)

Home

// For full API documentation, including code examples, visit http://wix.to/94BuAAs

$w.onReady(function () {
	// To make this Code work in all of your site pages,
	// Move these lines into the the 'Site Code' panel on the left

	$w("#headerTransitionPoint").onViewportLeave(() => {
		$w("#scrollingHeaderStrip").show();
		$w("#defaultHeaderStrip").hide();
	})
	$w("#headerTransitionPoint").onViewportEnter(() => {
		$w("#defaultHeaderStrip").show();
		$w("#scrollingHeaderStrip").hide();
	})
});

 

Site Code

// For full API documentation, including code examples, visit http://wix.to/94BuAAs

$w.onReady(function () {
	// Uncomment these lines to make this interaction works across all pages
	// Be aware to run this code only once, or from the page code, or from the site code
	
	// To make this Code work in all of your site pages,
	// Move these lines into the the 'Site Code' panel on the left
	
	// $w("#headerTransitionAnchor").onViewportLeave(() => {
	// 	$w("#whiteHeader").show();
	// })
	// $w("#headerTransitionAnchor").onViewportEnter(() => {
	// 	$w("#whiteHeader").hide();
	// })
});

 

API

$w.Header API

$w.HiddenMixin API

 

Corvid by Wix (윅스 코딩 - 콜비드) 개발자 모드/도구 활성화하는 방법

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

 

 

연관된 토픽)

윅스 (Wix) 코딩 초급 (Beginner) - 이미지 숨기기 보이기 (Hide and Show an Image) - 상호작용 (Interaction)

윅스 (Wix) 코딩 초급 (Beginner) - 사이트 콘텐츠 변경하기 (Change Site Content) - 상호작용 (Interactions)

윅스 (Wix) 코딩 초급 (Beginner) - 축소 확장 구성요소 만들기 (Collapse Elements) - 상호작용 (Interactions)

윅스 (Wix) 코딩 중급 (Intermediate) - 사이트 구성요소 숨기기 보이기 (Hide & Show Elements) - 상호작용 (Interactions)

 

 

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

콜비드 - 윅스 코딩 (Corvid - Wix coding)

Sticky Header | Corvid by Wix Examples | Wix.com