Question

我在引导标签中集成了一个浮动按钮。它工作正常是第一个选项卡，但对于第二个选项卡，按钮在向下滚动到底部时闪烁。你可以在这里查看测试html

网址：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>

Answer 1

当你在第一个标签页时，你的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”属性。

按钮在第二个引导选项卡中闪烁

1 个答案: