2013-10-18 2 views
0

모바일 웹 애플리케이션의 탐색 바를 고정시켜 달라는 요청이있었습니다. 이것은 매우 간단해야하지만, 포지션을 설정하자마자, div를 고정시킨 div에 고정 시키면 모든 지옥이 풀 렸습니다.위치 : 탐색 바에 고정되어 스크롤이 끊어졌습니다.

처음에는 다른 모든 요소가 위로 올라와 겹칩니다. 나는 얻을 수 있고 함께 일할 수 있습니다. 큰 문제는 스크롤링이 전혀 작동하지 않는다는 것입니다. 마우스 스크롤 버튼을 클릭하여 "스크롤 스크롤"을 얻을 수 있지만 휠을 돌리면 최신 크롬, 즉 10 및 사파리는 전혀 작동하지 않습니다. 이것은 모바일 앱이므로 가장 가능성이 큰 마우스를 사용하지는 않지만 기기에서 화면이 고르지 않게 만듭니다. iOS 및 Android로 테스트했습니다.

흥미롭게도 가운데 버튼 클릭을 왼쪽 마우스 클릭으로 해석합니다.

변형이있을 경우 수정 된 부분이 제대로 작동하지 않는다는 점을 발견했습니다. 그것은 고정 된 실제로 고정 된 대신 절대적으로 작동하지만 위의 문제가 여전히 있습니다.

CSS

#header { 
    position:fixed; 
    top:0; 
    left:0; 
    right:0; 
    text-align:center; 
    height: 40px; 
    background: black; 
} 

HTML

<div id="header"> 
    <table class="head"> 
    <tr> 
     <td class="hleft" id="logout" onclick="javascript: window.history.back();"></td> 
     <td class="comm">Community</td> 
     <td><asp:TextBox ID="searchbox" CssClass="k-textbox searchSmall" runat="server" OnTextChanged="searchbox_TextChanged"></asp:TextBox></td> 
    </tr> 
    </table> 
</div> 

편집 : 난 단지 내가 올바른 길이를 적절하게 자르고로 중앙 텍스트를 얻는 데 문제가 있었기 때문에, 테이블을 사용하려고 보관하고 아래이었다 있어요 다음 셀, 아직도이 btw. 테이블은 요구 사항이 아니며 실제로 표준 스타일의 목록 메뉴를 사용하는 것을 선호하지만이를 시도하고 couldnt가 작동하도록했습니다.

+0

당신의'# wrap' CSS를 게시하십시오 –

+0

@HC_ 제가 말한 래퍼는 # wrapped입니다 div # header –

+0

당신의 문제를 보여주기위한 피델은 어떻습니까? – Terry

답변

1

당신은 나머지 코드를 게시하지 않았지만 나에게 좋을 것 같습니다. 예를 들면 다음과 같습니다. http://jsfiddle.net/t3uxS/

나머지 페이지 콘텐츠와 함께 고정식 상단 표시 줄을 래퍼 내에 보관 했습니까?

편집

(필요하면) <div class="content">에 더 많은 콘텐츠 (ㅋ ㅋ ㅋ ㅋ ㅋ ㅋ의)는 스크롤을보고 추가합니다. 단지 같은 일 것

:

<div id="header"> 
</div> 
<div class="content"> 
</div> 
+0

나는 생각한다. 나는 그것을 부수고 그것이 효과가 있는지보기 위해 노력할 것이다. Form 태그가 이것이 ASP.NET 프로젝트 (MVC 아님)이기 때문에 이것에 영향을 주는지 궁금합니다. –

0

당신이 당신의 CSS에 #을 추가 그래서 대신 헤더 {}가 # 될 것이라고하는 것을 잊었다처럼 코드가 보이나요, 나에게 올바른 보이나요 헤더 ID가 아니기 때문에 머리글 {}이 (가)

+0

감사합니다.하지만 붙여 넣기 한 것을 복사 할 때 반드시 제거해야합니다. –

0

귀하의 사이트에있는 다른 태그와 관련된 문제 일 수 있습니다. 제목 위치를 고정으로 설정하면 일반 페이지 흐름에서 해당 섹션을 가져오고 다른 태그 섹션은 그 아래 및 주변 공간을 채 웁니다. 코드와 CSS의 나머지 부분을 볼 수 있습니까?

관련 문제