Question

我已经使用了affix属性来修复顶部特定像素中的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'方法的插件！

使用词缀修复页面的div

1 个答案: