javascript - 使用词缀修复页面的div

Question

我已经使用词缀属性将 div 固定在顶部的特定像素中，但这对我来说不起作用。侧边栏未在此处修复

这是我使用的代码

    <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

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

使用 Javascript

   $(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.");
    });
});

Answer 1

在您的 CSS 中尝试删除此行中的空格:

   #sidebar .affix

你的 javascript 也很正确，应该是这样的:

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

当然除非你有一些插件定义了一个'affix'方法!