모바일 스크롤 백 스트레치 빈 하단 막대

Question

그래서 내 웹 사이트에 대한 백 스트레치 jQuery 플러그인을 사용하고 있으며 지금까지 훌륭하게 작동합니다. 내가 볼 수있는 유일한 문제는 스크롤링을 시작할 때 맨 아래의 URL과 하단 브라우저 메뉴가 축소/사라지는 즉시 모바일 수직 화면에 빈 흰색 막대가 아래쪽에 표시된다는 것입니다. body 태그의 배경이 위쪽 및 아래쪽 브라우저 막대가 사라질 때 크기를 조정해야한다는 것을 등록하지 않는 것 같습니다. 이 문제를 해결하는 방법에 대한 아이디어가 있습니까? 나는 Boostrap 3.0을 사용 중이며 수직 스크롤 막대에 흰색 막대와 관련된 문제가 있지만 overflow-x : hidden으로 해결할 수있었습니다. 어떤 아이디어라도 대단히 감사하겠습니다. 웹 사이트는 http://ivynursery.jacobbuller.com입니다. http://ivynursery.jacobbuller.com/about.php 정보 및 http://ivynursery.jacobbuller.com/contact.php 페이지에서 문제를 확인할 수 있습니다.

html, 
body { 
height: 100%; 
position: relative; 
} 
body { 
overflow-x: hidden; 
/* Removes right space for browser scrollbar on mobile */ 
} 
.container { 
margin-right: 15px; 
/* Adjust content to make up for hidden x-overflow 15px on mobile */ 
} 
@media (min-width: 768px) { 
.container { 
margin-right: auto; 
/* Adjust content to middle for non-mobile */ 
} 
} 

Answer 1

내가 예를 120 픽셀에 높이를 추가하십시오 (대부분 적은 60 픽셀보다 네비게이션 바) 한 JS에서 BackStretch 상자와 이미지 :

여기에 몸과 컨테이너 div를 위해 내가 가지고있는 CSS입니다.

...:this.$root.height():this.$root.innerHeight(),g=g+120,... 

하지만 당신이 아래로 스크롤 할 때 물론 다른 내부 상자 높이, 네비게이션 바 내가 CSS에서/덜

.backstretch.freeze{ 
&,img{ 
     -webkit-transition: height 5000s ease-out, width 5000s ease-out, left 5000s ease-out, top 5000s ease-out; 
     -o-transition: height 5000s ease-out, width 5000s ease-out left 5000s ease-out, top 5000s ease-out; 
     transition: height 5000s ease-out, width 5000s ease-out left 5000s ease-out, top 5000s ease-out; 
    } 
} 
//hide empty space after navbar hide 
.backstretch{ 
    img{ 
     top:-60px; 
    } 
} 

하지만 난을 상자 변경을 동결보다 높아진다 아래로 스크롤 창 후에 사라를 얻을 것이다 다음 문제 가져 오기 - 화면 회전이 변경되면 화면이 정지됩니다. 그래서 나는 하나 이상의 JS 함수가 필요하다. 너비가 조정될 때 '고정'클래스를 넣을 수 있습니다. 그러나 높이를 조정할 때 - 스크롤 할 때 navbar가 점프한다는 것은 모바일에서의 의미입니다.

좋아요. 다음은 모바일에서 회전 할 때 bg chages를 변경하지만 스크롤하지 않을 때는 완벽하지 않습니다. 하지만 누군가는 코드를 적절하게 만들 수 있습니다. Thx