0

I have used the affix property to fix the div in a particular pixels from top but this is not working out for me.The sidebar is not fixed out here

Here is the code I am using

    <div id="sidebar" style="float:left" class="affix">
<div id="nav-anchor"></div>
<nav class="indexnav">
<ul id="indexlist">
<li><a href="#AdolescentGynecology">Adolescent gynecology</a></li>
<li><a href="#BreastEvaluation">Breast evaluation</a></li>
<li><a href="#BirthControl">Birth control/emergency contraception</a></li>
<li><a href="#Endometriosis">Endometriosis</a></li>
<li><a href="#Fibroids">Fibroids</a></li>
<li><a href="#HPV">HPV vaccination</a></li>
<li><a href="#Infertility">Infertility</a></li>
<li><a href="#Menopause">Menopause and hormonal issues</a></li>
<li><a href="#Menstrual">Menstrual problems</a></li>
<li><a href="#Minimally">Minimally invasive surgical approaches</a></li>
<li><a href="#Normal">Normal and abnormal Pap smears</a></li>
<li><a href="#Polycystic">Polycystic ovarian syndrome</a></li>
<li><a href="#Premenstrual">Premenstrual syndrome</a></li>
<li><a href="#SexualDysfunction">Sexual dysfunction</a></li>
<li><a href="#STD">Sexually transmitted diseases</a></li>
<li><a href="#Vaginitis">Vaginitis</a></li>
<li><a href="#Urinary">Urinary and fecal incontinence</a></li>
<li><a href="#Advanced">Advanced laparoscopy</a></li>
<li><a href="#Colposcopy">Colposcopy services</a></li>
<li><a href="#Gynecology">Gynecology surgical procedures</a></li>
<li><a href="#Question" style="font-family:'source san pro'; font-size:24px;">Need to know more?</a></li>
</ul>
</nav></div>

Css I used for the above code

#sidebar .affix{
    top:10px;
    position:fixed;}

Javascript Used

   $(document).ready(function(){
jQuery("#sidebar").affix({
        offset: {
            top: 700 
        }
   });
    $("#sidebar").on('affixed.bs.affix', function(){
        alert("The left navigation menu has been affixed. Now it doesn't scroll with the page.");
    });
});
Alexander O'Mara
  • 58,688
  • 18
  • 163
  • 171
Harsha Vardhan
  • 101
  • 1
  • 1
  • 8
  • Can you describe exactly what the problem is, what your solution did and how it didn't completely address the problem? (That'll help people who can answer your question and future reader who may have the same problem). – Dettorer Dec 17 '14 at 08:51
  • I am trying to make the #sidebar div in the webpage to be fixed when scrolling the whole page. This is not happening instead the div is scrolled down while I scroll the page – Harsha Vardhan Dec 17 '14 at 08:56

1 Answers1

1

In your CSS try removing the space in this line:

   #sidebar .affix

Also your javascript is quite right either should be something like: 

jQuery('#sidebar.affix').css ( { <style definitions go here> } );

unless of course you have some plugin that defines an 'affix' method !

N.R
  • 88
  • 6