2016-04-05 3 views
0

Я создал шаблон для своего сайта (www.forum.clothingshop.ir). Когда я прокручиваю курсор мыши в chrome, заголовок, расположенный поверх меню, скрыт на странице. Но нет проблем в firefox.позиция: фиксированный хром не работает в хромированном

Javascript является:

var fixmeTop = $('#topBox').offset().top; 
 
     $(window).scroll(function() { 
 
      var currentScroll = $(window).scrollTop(); 
 
      if (currentScroll >= fixmeTop) { 
 
       $('#topBox').css({ 
 
        position: 'fixed', 
 
        top: '0', 
 
        left: '0' 
 
       }); 
 
      } else { 
 
       $('#topBox').css({ 
 
        position: 'static' 
 
       }); 
 
      } 
 
     });
the css is 
 
#topBox { 
 
    width:100%; 
 
    background-color:#fff; 
 
    z-index:999; 
 
    
 
} 
 

 
The html is
<div id="topBox"> 
 
     <div class="container-fluid nopadding"> 
 
      <div id='cssmenu' class="col-sm-8"> 
 
       <ul> 
 
        <li><a href='#'><span>Home</span></a></li> 
 
        <li class='active has-sub'> 
 
         <a href='#'><span>Products</span></a> 
 
         <ul> 
 
          <li class='has-sub'> 
 
           <a href='#'><span>Product 1</span></a> 
 
           <ul> 
 
            <li><a href='#'><span>Sub Product</span></a></li> 
 
            <li class='last'><a href='#'><span>Sub Product</span></a></li> 
 
           </ul> 
 
          </li> 
 
          <li class='has-sub'> 
 
           <a href='#'><span>Product 2</span></a> 
 
           <ul> 
 
            <li><a href='#'><span>Sub Product</span></a></li> 
 
            <li class='last'><a href='#'><span>Sub Product</span></a></li> 
 
           </ul> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
        <li><a href='#'><span>About</span></a></li> 
 
        <li class='last'><a href='#'><span>Contact</span></a></li> 
 
        <li> 
 
         <div id="example2"> 
 
          <div class="wrapper2"> 
 
           <div class="content-wrapper2"> 
 
            <div class="search-button2"> 
 
             <span><img src="NextLevelSearch/images/search-icon-big.jpg" /></span> 
 
            </div> 
 
            <div class="search-box2"> 
 
             <input type="text" placeholder="جستجو..." /> 
 
             <img src="NextLevelSearch/images/close.png" /> 
 
            </div> 
 
           </div> 
 
          </div> 
 

 
         </div> 
 
        </li> 
 
        <li style="margin:30px auto 0;"> 
 
         <button id="cart" value=""><span class="glyphicon glyphicon-shopping-cart"></span>&nbsp;سبد خرید</button> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
      <div class="col-sm-4 companyName" style="float:left"> 
 

 
      </div> 
 
     </div> 
 
    </div>

+0

Кажется, для меня работает. Верхняя часть становится «фиксированной» как на Firefox, так и на Chrome на моем компьютере (на вашем реальном сайте). Я что-то упускаю? – doug65536

+0

попробуйте добавить «обратная видимость: скрытая», а также – jilykate

+0

@ doug65536 Попробуйте прокрутить вверх до конца. Это создает пустую веб-страницу в Chrome. – Roy

ответ

0

Удалить или скрыть стили для элемента #topBox

От

#topBox { 
     width: 100%; 
     background-color: #fff; 
     z-index: 999; 
} 

в

#topBox { 
    /* width: 100%; */ 
    /* background-color: #fff; */ 
    /* z-index: 999; */ 
} 

Это сработает.

+0

это не работает. когда выполняется прокрутка вверх до вершины без netscroll мыши. не знаю, это причина –

+0

Я попытался прокомментировать эти стили в инструменте разработчика браузера (элемент Inspect) на вашем веб-сайте. Веб-сайт не показывает белый экран при прокрутке вверх. –

Смежные вопросы