상단고정 처리

css 적용해 페이지 scroll-down해도 항상 보였으면 하는 부분들을 보이도록 상단고정 처리해봤다.
로그인 여부에 따라 상단 높이도 조절해줬다.

html

• nav: 상단고정 영역
• separator-horizontal2: 경계선

<nav th:classappend="${session.username != null} ? 'nav-logged-in' : 'nav-logged-out'">
	...
</nav>

<div class="separator-horizontal2" 
th:classappend="${session.username != null} ? 'sep-logged-in' : 'sep-logged-out'"></div>

css

nav {
	line-height: 40px;	/* 각줄의 높이 */
	color: #2f75ca;
	font-size: 16px;
	text-align: center;
	padding: 5px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* 다른 요소 위에 고정하기 위해 z-index 설정 */
    background-color: white; /* 배경색 설정해 다른 내용과 겹치지 않도록 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 그림자 */
	}

/* 수평선2 */
.separator-horizontal2 {
    width: 100%;
    border-bottom: 1px solid #b5b5b5;
    }
    
/* 로그인한 경우 */
.nav-logged-in {
    height: 90px;
}

.sep-logged-in {
    margin-top: 90px;
}

/* 로그인하지 않은 경우 */
.nav-logged-out {
    height: 50px;
}

.sep-logged-out {
    margin-top: 50px;
}

로그인 전:

로그인하고 scroll-down했을 때: