кнопка мерцает во второй вкладке начальной загрузки

Я интегрирую плавающую кнопку в вкладках начальной загрузки. Он отлично работает, это первая вкладка, но для второй вкладки кнопка мерцает при прокрутке вниз. Вы можете проверить тест HTML здеськнопка мерцает во второй вкладке начальной загрузки

URL: http://estatedevelopment.net/bootstrap/

<!DOCTYPE html> 
<html> 
<head> 
<title>Bootstrap 101 Template</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<!-- Bootstrap --> 
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
</head> 
<body> 
<script src="http://code.jquery.com/jquery.js"></script> 
<script src="bootstrap/js/bootstrap.min.js"></script> 

<script type="text/javascript"> 
     $(document).ready(function(e) { 


      var stickyNavBottomval2 = $('.edit_profile_save').offset().top; 
    var stickyNav_bottom = function(){ 
      var scrollBottom2 = $(window).scrollTop() + $(window).height(); 


      if (scrollBottom2 < stickyNavBottomval2) { 
       $('.edit_profile_save').addClass('subnav-editprofile-sticky-bar-bottom'); 
      } else { 
       $('.edit_profile_save').removeClass('subnav-editprofile-sticky-bar-bottom'); 
      } 
     }; 
     stickyNav_bottom();  


    var stickyNav_bottom_pre = function(){ 

    var stickyNavBottomval2_pre = $('.edit_profile_save_pre').offset().top; 

      var scrollBottom2_pre = $(window).scrollTop() + $(window).height(); 

      if (scrollBottom2_pre < stickyNavBottomval2_pre) { 
       $('.edit_profile_save_pre').addClass('subnav-editprofile-sticky-bar-bottom'); 
      } else { 
       $('.edit_profile_save_pre').removeClass('subnav-editprofile-sticky-bar-bottom');  
      } 
     }; 
     stickyNav_bottom_pre();  



    $(window).scroll(function() { 


        stickyNav_bottom();     stickyNav_bottom_pre();  

    }); 



      }); 

</script> 
<div style="width:100%"> 
    <div style="width:900px; margin:auto;"> 
    <h1>Hello, world!</h1> 
    <div class="tabbable"> <!-- Only required for left/right tabs --> 
     <ul class="nav nav-tabs"> 
     <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> 
     <li><a href="#tab2" data-toggle="tab">Section 2</a></li> 
     </ul> 
     <div class="tab-content"> 
     <div class="tab-pane active" id="tab1"> 
      <p>section 1 content stats here. section 1 content stats here. </p> 

     <div class="float_bottom_div_s1 edit_profile_save"> <input type="submit" value="Submit" class="float_button button"></div> 

     </div> 
     <div class="tab-pane" id="tab2"> 

      <p>section 2 content stats here. </p> 

     <div class="float_bottom_div_s2 edit_profile_save_pre"> <input type="submit" value="Submit" class="float_button button"></div> 



     </div> 
     </div> 
    </div> 
    </div> 
    <style> .button{ width:280px; height:70px;} 


.subnav-editprofile-sticky-bar-bottom{ 
    border-bottom: 0 none; 
    margin-bottom: 59px !important; 
    position: fixed; 
    bottom: 0; 
    width: 66.5%; 
    text-align:center; 
    z-index: 100; 
    } 

    .subnav-editprofile-fin-sticky-bar-bottom{ 
    border-bottom: 0 none; 
    margin-bottom: 59px !important; 
    position: fixed; 
    bottom: 0; 
    width: 45.5%; 
    text-align:center; 
    z-index: 100; 
    } 


</style> 
</div> 
</body> 
</html>

источник

2013-08-06 Anoop Chandran

Пожалуйста, покажите нам какой-нибудь код. – Micha

Я добавил код на вопрос –

, когда вы находитесь в первой вкладке ваш HTML DIV выглядеть:

<div class="float_bottom_div_s2 subnav-editprofile-sticky-bar-bottom"> 
    <input type="submit" class="float_button button" value="Submit"> 
</div>

При нажатии кнопки на второй вкладке ваш HTML является как стать:

<div class="float_bottom_div_s2 edit_profile_save_pre subnav-editprofile-sticky-bar-bottom"> 
    <input type="submit" class="float_button button" value="Submit"> 
</div>

Так что атрибут «edit_profile_save_pre» не следует добавлять, когда вы нажимаете на вторую вкладку.

источник

2013-08-06 09:35:24

Я пробовал ваш ответ без везения ... также я заметил, что ваш код такой же, как мой..plus, вы пропустили точку. –

@AnoopChandran в вашем css, вы указали позицию: исправлено, поэтому его произошло, и я удалил эту строку css из контрольного элемента, тогда ваша проблема была решена. см. обновленный css в том, что я удалил эту часть кода. –

Если я удалю css «position: fixed», тогда кнопка wont float .. просто сидит внизу ... это не требуемая функциональность ... кнопка отправки работает нормально на первой вкладке ... проблема в том, что во второй вкладке. –

кнопка мерцает во второй вкладке начальной загрузки

ответ

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