javascript - Bootstrap data-offset-bottom -

-

i have problem the bootstrap affix data-offset-bottom. therefore created small example show problem. container spyed stops @ right position when scrolling jumps.

https://jsfiddle.net/j68mslno/4/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');    body {    position: relative;    color: white;  }  .affix {    top: 50px;    width: 100%;    z-index: 9999 !important;  }  .affix ~ .container-fluid {    position: relative;    top: 50px;  }  .navbar {    margin-bottom: 0px;  }  #section1 { padding-top: 50px; height:  500px; background-color: #1e88e5; }  #section2 { padding-top: 50px; height:  500px; background-color: #673ab7; }  #section3 { padding-top: 50px; height: 1500px; background-color: #ff9800; }
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-bottom="1500">    <div class="container-fluid">      <p>        stop @ section 3      </p>      <div>        <div class="collapse navbar-collapse" id="mynavbar">          <ul class="nav navbar-nav">            </ul>        </div>      </div>    </div>  </nav>    <div id="section1" class="container-fluid"><h1>section 1</h1></div>  <div id="section2" class="container-fluid"><h1>section 2</h1></div>  <div id="section3" class="container-fluid"><h1>section 3</h1></div>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0msbjdehialfmubbqp6a4qrprq5ovfw37prr3j5elqxss1yvqotnepnhvp9aj7xs" crossorigin="anonymous"></script>

i've added attribute data-offset-top="-1" <nav ... >. that's all. please check result:

https://jsfiddle.net/glebkema/xd4qg498/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');    body {    position: relative;    color: white;  }  .affix {    top: 50px;    width: 100%;    z-index: 9999 !important;  }  .affix ~ .container-fluid {    position: relative;    top: 50px;  }  .navbar {    margin-bottom: 0px;  }  #section1 { padding-top: 50px; height:  500px; background-color: #1e88e5; }  #section2 { padding-top: 50px; height:  500px; background-color: #673ab7; }  #section3 { padding-top: 50px; height: 1500px; background-color: #ff9800; }
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-bottom="1500" data-offset-top="-1">    <div class="container-fluid">      <p>        stop @ section 3      </p>      <div>        <div class="collapse navbar-collapse" id="mynavbar">          <ul class="nav navbar-nav">            </ul>        </div>      </div>    </div>  </nav>    <div id="section1" class="container-fluid"><h1>section 1</h1></div>  <div id="section2" class="container-fluid"><h1>section 2</h1></div>  <div id="section3" class="container-fluid"><h1>section 3</h1></div>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0msbjdehialfmubbqp6a4qrprq5ovfw37prr3j5elqxss1yvqotnepnhvp9aj7xs" crossorigin="anonymous"></script>


Comments

Post a Comment

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

-
everything work fine on code below fetch user logs: js: <script> $(document).ready(function () { var table =$('#systemlogs').datatable({ responsive: true, processing: true, serverside: true, "language": { "url": "/datatables/media/plug-in/persian.json" }, ajax: '{!! url('/admin/systemlogs/data/systemlogsdatatable') !!}', columns: [ { data: 'name', name: 'name' }, { data: 'message_text', name: 'message_text' }, { data: 'remote_addr', name: 'remote_addr' }, { data: 'log_created_at', name: 'management_logs.created_at' }, { data: 'log_updated_at', name: 'management_logs.updated_at' }, ] }); }); </script> routes: route::get('/systemlogs/data/systemlogsdatatable','systemlogscontrolle...
Read more

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

-
i getting error when run spring application: exception in thread "main" org.springframework.context.applicationcontextexception: unable start embedded container; nested exception org.springframework.context.applicationcontextexception: unable start embeddedwebapplicationcontext due missing embeddedservletcontainerfactory bean. @ org.springframework.boot.context.embedded.embeddedwebapplicationcontext.onrefresh(embeddedwebapplicationcontext.java:124) @ org.springframework.context.support.abstractapplicationcontext.refresh(abstractapplicationcontext.java:476) @ org.springframework.boot.context.embedded.embeddedwebapplicationcontext.refresh(embeddedwebapplicationcontext.java:109) @ org.springframework.boot.springapplication.refresh(springapplication.java:691) @ org.springframework.boot.springapplication.run(springapplication.java:320) @ org.springframework.boot.springapplication.run(springapplication.java:952) @ org.springframework.boot.springa...
Read more

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -

-
msg 245, level 16, state 1, line 1 conversion failed when converting varchar value '8:45 am' data type int. script declare @specimenid bigint = 0, @script varchar(max); declare @starttime int = (select convert(int,substring(start_time,0,charindex(':', start_time)) - 12) appt appt._id=112601) --select @starttime set @script = 'select distinct ptlast_name + '', '' + pt.first_name patient_name, dbo.formatdate(pt.dob,''mm/dd/yyyy'') dob, (convert(varchar, (datediff(yy, dob, appt_date) - case when (month(dob) > month(appt_date)) or (month(dob) = month(appt_date) , day(dob) > day(appt_date)) 1 else 0 end)) + ''/'' + convert(varchar, (datediff(m, dateadd(yy, (datediff(yy, dob, appt_date) - case when (month(dob) > month(appt_date)) or (month(dob) = month(appt_date) , day(dob) > day(appt_date)) 1 else 0 end), d...
Read more