javascript fixed 움직임 질문
본문
위에 테스트 사이트를 만들어 놓았습니다.
아래는 질문 내용입니다
・ 오른쪽에 fixed시킨 infoTab버튼이 스크롤하면서 깜빡거립니다 (모든 브라우저)
・ 스맛폰에서 고정시킨 메뉴를 펼쳤을때, 화면에 벗어나는 메뉴내용이 스크롤이 되어야 하는데
폰화면에 벗어난 내용이 안보여서 어찌해야 할지 모르겠습니다.
기입한 js 내용은 아래와 같습니다.
// JavaScript Document
$(window).load(function () {
//gNavi
$(function () {
var $gNav = $('.gNav'),
offset = $gNav.offset();
// Nav Fixed
$(window).scroll(function () {
if( ($(window).scrollTop() > offset.top) && $(window).innerWidth() > 767 ) {
$gNav.addClass('fixed');
$("#wrap").css("margin-top", "72px");
} else {
$gNav.removeClass('fixed');
$("#wrap").css("margin-top", "0");
}
});
});
$(function () {
var $header = $('header'),
offset = $header.offset();
$(window).scroll(function () {
if( ($(window).scrollTop() > offset.top) && $(window).innerWidth() < 768 ) {
$header.addClass('fixed');
$("#wrap").css("margin-top", "60px");
} else {
$header.removeClass('fixed');
$("#wrap").css("margin-top", "0");
}
});
// Nav Toggle Button
$('#navToggle, .closeBtn').click(function () {
$header.toggleClass('open');
});
});
//pageTopへスムーズに
$('a[href^="#"]').click(function () {
var speed = 500;
var href = $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({
scrollTop: position
}, speed, "swing");
return false;
});
// tab menu
$(".tab li").click(function () {
var num = $(".tab li").index(this);
$(".tabContent").removeClass('active');
$(".tabContent").eq(num).addClass('active');
$(".tab li").removeClass('active');
$(this).addClass('active')
});
//pageTopへ
var topBtn = $('#pageTop');
var btmArea = $('.fBtmArea');
var dw = $(window).innerWidth();
$(window).bind("scroll", function () {
winwd = $(window).width();
scrollHeight = $(document).height();
scrollPosition = $(window).height() + $(window).scrollTop();
footHeight = btmArea.height();
if (scrollHeight - scrollPosition <= footHeight - 10) { //footerからのmargin分
if ( dw > 768 ) {
topBtn.css({
"position": "absolute",
"right": "30px",
"bottom": "auto",
"top": (scrollHeight - footHeight - 65) + "px" //footerからのmargin分 + btn高さ
});
} else {
topBtn.css({
"position": "absolute",
"right": "0",
"bottom": "auto",
"top": (scrollHeight - footHeight - 120) + "px" //footerからのmargin分 + btn高さ
});
}
//topBtn.addClass('endP');
} else {
if ( dw > 768 ) {
topBtn.css({
"position": "fixed",
"right": "30px",
"bottom": "50px",
"top": "auto"
});
} else {
topBtn.css({
"position": "fixed",
"right": "0",
"bottom": "50px",
"top": "auto"
});
}
}
});
//tabBtn.hide();
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//var infoTab = $('#infoTab');
var infoTab = $("#infoTab");
infoTab.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
infoTab.fadeIn();
} else {
infoTab.fadeOut();
}
});
//cssで画像トリミングie対応
objectFitImages('img.object-fit-img');
});
답변 2
//상단 깜빡이는것은
var infoTab = $("#infoTab");
infoTab.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
infoTab.fadeIn();
} else {
//infoTab.fadeOut(); //이부분을 주석처리하시거나 100 부분을 줄여보세요
}
});
//해당메뉴 스크롤이 높이가 지정되지 않아서 그런것입니다
//높이 조정은 구조상 스크립트를 쓰셔야 하고요
//검색부분 레이아웃을 조정하셔야 합니다
<script type="text/javascript">
<!--
jQuery(document).ready(function(){
var menu_height=743;//메뉴 높이
var win_height=jQuery(window).height();
var head_height=jQuery(".headerTop").height();
var diff_height=win_height-head_height;
if(menu_height>diff_height){//창높이가 적은경우 처리
jQuery(".spOpen").height(diff_height);
}
});
정말 감사합니다^^
깜빡이는 부분의 100을 50으로 조정해 주었는데
고쳐졌는지 모르겠네요-.. 일단 제 브라우저에서는 괜찮은데..
메뉴 스크롤 문제도 감사드립니다. 알려주신 소스를 적용해서
html/css부분을 조정해보려 합니다 !! 감사합니다^^
@onlymilk47
답변해주신 코드를 이용해서 적용했는데요
jQuery(document).ready(function(){
var menu_height=743;//메뉴 높이
var win_height=jQuery(window).height();
var head_height=jQuery(".headerTop").height();
var diff_height=win_height-head_height;
if(menu_height>diff_height){//창높이가 적은경우 처리
jQuery(".spOpen").height(diff_height);
}
});
이 코드가 mac safari에서 .spOpen 부분에 자동으로 높이를 줘버리네요..
혹시 767px 이하에서만 적용될 수 있도록 하려면 어떻게 해야하나요?
jQuery(document).ready(function(){
var menu_height=743;//메뉴 높이
var win_height=jQuery(window).height();
if(win_height<767){
var head_height=jQuery(".headerTop").height();
var diff_height=win_height-head_height;
if(menu_height>diff_height){//창높이가 적은경우 처리
jQuery(".spOpen").height(diff_height);
}
}
});
