css3 - Is it possible to create a sticky vertical column using Bootstrap without having to specify position? -


i'm trying effect of sticky column right of text, in bootstrap web page.

here's code:

             <nav class="col-sm-4 col-md-4"  data-spy="affix"  data-offset-top="205">                 <div class="panel panel-default" >                     <div class="panel-heading"><h1>table des matières</h1></div>                     <section class="panel-body">                     <p>                         nullam luctus nisi est, id blandit nunc tristique vel!                      </p>                     </section>                 </div>             </nav>

(there bar on left takes 8 previous columns)

this sort of works: sidebar appears in right place when page loads, , when scroll stays stuck top, but jumps across left , sits on top of left-most column, acquiring width doesn't seem have (5 columns , bit wide).

looking @ documentation seems have configure .affix class myself in css stays in right place (which seems bit strange, want stay in column comes from!). values should use? have tried putting in css:

.affix { top: 20px; left: 62%; width: 25%; }

and works (the left positioning , width off), of course doesn't work when @ in different width browser window. mean have put appropriate media-queries? or use bit of calculation on basis of column widths etc? have basic sass knowledge - perhaps way forward, calculate these widths compiling bootstrap in sass?

also, if has idea how reveal chapter you're on in sidebar (exactly on bootstrap page) great!

looks need add right: 0; affix property in css keep pinned right. went ahead , created codepen of working model can check out below.

for design changes links based on position need add scrollspy class ul parent , style a links accordingly.

note added classes div , ul containing li nav elements.

for responsive design need set appropriate col widths xs, sm, , md.

bootstrap affix right-side


-

Comments

Post a Comment

Popular posts from this blog

java - Jasper subreport showing only one entry from the JSON data source when embedded in the Title band -

Image
i having issues populating data in subreport in title band of main report. data populated correctly in subreport in detail band of main report. trying find wrong in json query. appreciated. json sample data source (expenses.json) { "expenses": { "date": "8 sep 2016", "accounts": [ { "title": "xyz corp (111)", "accountname": "xyz corp", "accountnumber": "111", "transactions": [ { "date": "21 jun 2016", "name": "gas", "price": "17.50" }, { "date": "12 may 2016", "name": "shopping", "price": "111.99" }, { "date": "30 apr 2016", "name...
Read more

serialization - Convert Any type in scala to Array[Byte] and back -

i have following question: i have variable value in program declared value. i want convert value byte array.. how can serialize byte array , back? found examples related other types such double or int, not any. this should need. it's pretty similar how 1 in java. import java.io.{bytearrayinputstream, bytearrayoutputstream, objectinputstream, objectoutputstream} object serialization extends app { def serialise(value: any): array[byte] = { val stream: bytearrayoutputstream = new bytearrayoutputstream() val oos = new objectoutputstream(stream) oos.writeobject(value) oos.close stream.tobytearray } def deserialise(bytes: array[byte]): = { val ois = new objectinputstream(new bytearrayinputstream(bytes)) val value = ois.readobject ois.close value } println(deserialise(serialise("my test"))) println(deserialise(serialise(list(1)))) println(deserialise(serialise(map(1 -> 2)))) println(deserialise(seri...
Read more

SonarQube Plugin for Jenkins does not find SonarQube Scanner executable -

Image
i trying run sonarqube scanner within jenkins post-build step. however, keep getting error message below: ------------------------------------------------------------------------ sonar analysis failed ------------------------------------------------------------------------ fatal: sonarqube scanner executable not found sonarqube build step 'execute sonarqube scanner' marked build failure from similar questions on stackoverflow read 1 should choose "install automatically" sonarqube scanner, have done. my configurations follows: sonarqube 6.0 jenkins 1.609.3 sonarqube plugin 2.4.4 sonarqube servers sonarqube scanner build-step when config sonarqube scanner in manage jenkins --> global tool configuration --> sonarqube scanner, besides select "install automatically", need add installer. see screenshot here: sonarqube scanner --> add installer
Read more