我对Bootstrap ScrollSpy在选定元素的滚动位置方面存在问题。问题发生在页面底部，我有两个相对较短的内容部分。当我直接选择 Projects 部分或滚动到它时， Education 部分将突出显示，而不是 Projects 部分。如何偏移/修复滚动位置以选择正确的部分？我之前尝试通过将锚移动到上一部分来解决这个问题，但只取得了有限的成功。我目前看到的唯一其他选项是重构我的内容。在我这样做之前，我想看看是否还有其他解决方案，因为我在第二个项目中遇到了这个问题。
可以在此处查看此问题：http://beta.joshuabock.com/resume.html
每个部分的结构都是一样的：
<section>
<h3>Projects</h3>
<p>Project Title</p>
<ul>
<li>Bullet Point</li>
<li>Bullet Point</li>
</ul>
</section>
提前致谢。
答案 0 :(得分：0)
好的，我做到了。首先
<nav id="resume-nav" class="sidebar-nav">
<ul id="resume-nav" class="nav nav-list">
您的导航和ul具有相同的ID。从你的ul中删除它。 第二次试试
padding-top:30px;
对于你的每个部分（只需添加一个类，只是为了给它们一些空间）。 最后也是最重要的删除
data-offset="0"
来自你的身体标签。默认值为10，并且使用30px的填充将为其提供一些空间，因此当您选择一个部分时，它会将您带到属于您选择的部分的空间。也许另一个价值会更好，只是玩它，直到你有你想要的。但总的来说，这是造成问题的原因。
<强> HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Joshua Bock's Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Joshua Bock, Portfolio, Web Design, Front End Developer, Web Developer">
<meta name="description" content="Joshua Bock's Portfolio websites">
<link rel="icon"
type="image/png"
href="public/img/favicon.png">
<link href="public/css/main.css" rel="stylesheet">
<link href="public/css/media-queries.css" rel="stylesheet">
<!--TypeKit-->
<script type="text/javascript" src="http://use.typekit.net/qdb5vrk.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!--HTML5 shim, for IE6-8 support of HTML5 elements-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="public/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="public/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="public/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="public/ico/apple-touch-icon-57-precomposed.png">
</head>
<body id="myStyle" data-spy="scroll" data-target="#resume-nav" data-offset="10">
<div class="container-fluid">
<div class="logo hidden-phone">
<img src="public/img/joshuabocklogo.png" alt="Joshua Bock Logo">
</div>
<header class="navbar">
<div class="navbar-inner">
<div class="container-fluid hdBody">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">
<h1>Joshua Bock</h1>
<strong>Website Designer & Web Developer</strong>
</a>
<nav class="nav-collapse collapse">
<ul class="nav">
<li><a href="index.html" class="button">Home</a></li>
<li><a href="#" class="button">Mobile Apps</a></li>
<li><a href="websites.html" class="button">Websites</a></li>
<li><a href="#" class="button">Game Jam's</a></li>
<li><a href="3dwork.html" class="button">3d Work</a></li>
<li class="active"><a href="#" class="button btn-active">Resume</a></li>
</ul>
</nav>
</div>
</div>
</header>
</div>
<div class="container-fluid bd">
<div class="row-fluid">
<aside class="span3 well affix" data-spy="affix">
<nav id="resume-nav" class="sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Resume</li>
<li class=""><a href="#resume-skills">Skillsets</a></li>
<li class=""><a href="#professional-experience">Professional Experience</a></li>
<li class=""><a href="#projects">Projects</a></li>
<li class=""><a href="#education">Education</a></li>
</ul>
</nav>
</aside>
<article id="resumeBd" class="well span9">
<section id="resume-skills" class="clearfix">
<h3>Skillsets</h3>
<ul class="unstyled">
<li><h4>Professional Skills</h4></li>
<li>3d Modeling & Texturing</li>
<li>World Builder</li>
<li>Graphic Design</li>
<li>Web Design & Development</li>
<li>Customer Service</li>
<li>Help Desk/Technology Support</li>
<li>Programming</li>
</ul>
<ul class="unstyled">
<li><h4>Web Technologies</h4></li>
<li>HTML5</li>
<li>CSS3</li>
<li>Javascript</li>
<li>Actionscript 3.0</li>
<li>Jquery</li>
<li>Jquery UI</li>
<li>Twitter Bootstrap</li>
<li>Yahoo YUI</li>
<li>Zend Framework</li>
</ul>
<ul class="unstyled">
<li><h4>Software Proficiency</h4></li>
<li>Adobe Photoshop CS6</li>
<li>Adobe Flash CS6</li>
<li>Adobe Dreamweaver CS6</li>
<li>Adobe Illustrator CS6</li>
<li>Adobe After Effects CS6</li>
<li>Adobe InDesign CS6</li>
<li>Autodesk 3d Studio Max 2012</li>
<li>Autodesk Maya 2012</li>
<li>Pixologic Zbrush 4</li>
<li>Unreal Editor 3</li>
<li>Valve Source SDK</li>
<li>Unity</li>
<li>Zend Studio 9</li>
</ul>
</section>
<section id="professional-experience" class="clearfix">
<h3>Professional Experience</h3>
<p><strong>Software Developer III</strong> (April 2013 - Present), <strong>Northrop Grumman, CJMTK</strong></p>
<p>As a Software Developer I am developing a new public facing website.</p>
<p><strong>Software Developer III</strong> (December 2012 - Present), <strong>Northrop Grumman, under contract to the Defense Systems Group</strong></p>
<p>As a Software Developer I am working on creating a uniformed look and feel for various widgets to be used by the U.S. Army.</p>
<ul>
<li>Developing a uniformed style for various widgets</li>
<li>Developing a widget using the MVC model, HTML5, Bootstrap, Jquery, Dojo, Ozone Common Framework, and ArcGIS</li>
<li>Designing and Developing various HTML5 wireframes based off current widgets</li>
</ul>
<p><strong>Front-End Developer</strong> (November 2012 - December 2012), <strong>Northrop Grumman, Internal Research and Development</strong></p>
<p>As a Front-End Developer I worked on creating wireframes and style guides. These wireframes were built using Adobe Proto, Twitter Bootstrap, and Jquery.</p>
<ul>
<li>Designed & Developed layout wireframes</li>
<li>Developed page layouts</li>
<li>Designed various Logo compositions</li>
</ul>
<p><strong>Multimedia Designer III</strong> (September 2011-November 2012), <strong>Northrop Grumman, under contract to the Intelligence Community </strong></p>
<p>As a Multimedia Designer I worked on classified projects, using Zend Studio 9, Adobe Photoshop, Adobe Illustrator, and Adobe After Effects to design websites that are cross-browser compatible and comply with the usability, accessibility standards set by the World Wide Web Consortium. These websites where built using frameworks such as, Yahoo YUI 2.0, Joomla, WordPress, and Zend Frameworks.</p>
<ul>
<li>Provided design considerations and inputs during initial products requirements meetings.</li>
<li>Provided multiple design options highlighting elements that meet customers’ goals.</li>
<li>Efficiently transferred product requirements into a working viewable product.</li>
<li>Successfully deployed multiple product releases days ahead of scheduled release.</li>
<li>Established working rapport with customers to develop their product vision.</li>
<li>Posed relevant questions driving towards solutions to design problems during product development.</li>
<li>Created and maintained descriptive documentation for hours spent on tasks.</li>
<li>Provided regular milestone samples of products, highlighting design issues.</li>
</ul>
<p><strong>Graphics Artist</strong> (February 2011- April 2011), <strong>DUA Computer Resources, under contract to Lockheed-Martin within the Intelligence Community</strong></p>
<p>As a member of a six-person Office of Corporate Communications graphics team working on both classified and unclassified projects, I used Adobe InDesign to design media products such as posters, brochures, retirement ceremony programs, event advertisements for plasma displays, web images, newsletters, logos, and publications. I consulted with clients throughout the Intelligence Community on their project requirements and design ideas. I worked on 42 projects. Significant projects included:</p>
<ul>
<li>Designed three graphics for the celebration of the Army’s birthday, creating a unified design for posters, web graphics, and plasma displays.</li>
<li>Designed a new event logo for a Support Team Conference to be used to advertise the event.</li>
<li>Designed a new Seal/Logo for the Office of the Inspector General.</li>
<li>Designed a poster collage to be given to members of the Deployment team.</li>
</ul>
<p><strong>CSR/ ITO Svc Delivery Rep III - NMCI Field Services - Help Desk</strong> (2009- February 2011), <strong>PSI Pax, Inc under contract to HP Enterprise Services/ HP Enterprise Services on the Navy Marine Corps Intranet (NMCI) contact– Dahlgren, VA</strong></p>
<ul>
<li>Provided exceptional technical support for the computer NMCI customer, resolving tickets within the required NMCI timeframe of 14 days. Followed up with customers to make sure the issues were fully resolved.</li>
<li>Commended for giving exceptional customer service.</li>
<li>Improved workflow to increase my productivity and took on additional tasks to improve my skills.</li>
<li>Placed orders for replacement parts and installed the parts.</li>
<li>Successfully completed the HP and Dell Workstation and Laptop certifications.</li>
</ul>
<p><strong>Graphic Specialist II</strong> ( October 2007- June 2009), <strong>Logistic Services International, under contract to L-3 Communications – D.P. Associates Inc. working for the U.S. Marine Corps on interactive courseware for KC-130J maintenance personnel – Havelock, NC</strong></p>
<ul>
<li>Synthesized highly complex and diverse information from subject matter experts into graphics to be used in lessons.</li>
<li>Received Quality Assurance Award recognition for producing high-quality graphics and an outstanding work ethic.</li>
<li>Collaborated with other team members to design effective workflows and procedures to decrease production time and decrease the amount of rework.</li>
<li>Helped other team members with graphic issues.</li>
</ul>
<p><strong>System Administrator/ Cage – Student Equipment Checkout Facility</strong> (September 2004- June 2007) <strong>Savannah College of Art & Design, Federal Work Study Program – Savannah, GA</strong>
<ul>
<li>Checked out/in equipment for student use for student projects.</li>
<li>Ensured equipment was in working order and responded to customer trouble tickets.</li>
</ul>
<p><strong>Information Technology Specialist</strong> (2002 to December 2006), <strong>College of Southern Maryland – La Plata & Leonardtown, MD</strong></p>
<ul>
<li>Set up AV equipment for classes and presentations. Set up a distance learning connection. Responded to customer tickets.</li>
<li>Created standard Software Loads (Images) into different pre-defined configurations (admin/lab/library, as well as classroom-specific), then updated them to further accommodate user needs by installing appropriate software.</li>
</ul>
</section>
<section id="projects" class="clearfix">
<h3>Projects</h3>
<p><strong>Front-End Developer</strong> (January 2013- Feburary 2013) <strong>Techzoku</strong></p>
<ul>
<li>Worked on creating a live tile 'tags' section</li>
</ul>
<p><strong>Modeler, & Level Designer</strong> (January 2012- January 2012) <strong>International Game Developers Assoication - Game Jam 2012 - Susie's Summer Home</strong></p>
<ul>
<li>Modeled and Textured Rooms</li>
<li>Modeled and Textured Grandfather Clocks</li>
<li>Placement of objects in rooms</li>
</ul>
<p><strong>Modeler, & Level Designer</strong> (January 2011- January 2011) <strong>International Game Developers Assoication - Game Jam 2011 - Space Exodus</strong></p>
<ul>
<li>Modeled the Spaceship</li>
<li>Created Planet Textures</li>
</ul>
</section>
<section id="education" class="clearfix">
<h3>Education</h3>
<p><strong>Certificate in Web Applications Developer</strong> (January 2012- May 2012), <strong>George Mason University -ed2go, Online Self-Pace Course</strong></p>
<p><strong>Bachelor of Fine Arts in Interactive Design & Game Development</strong> (September 2004- May 2007), <strong>Savannah College of Art & Design - Savannah, GA</strong></p>
<p><strong>Associate’s Degree in Applied Sciences in Computer Programming</strong> (August 2001- May 2004), <strong>College of Southern Maryland - La Plata, MD</strong></p>
</section>
</article>
</div>
<hr>
<footer>
<p>© Joshua Bock 2013</p>
</footer>
</div>
</div><!--/.fluid-container-->
<script src="public/js/page-contoller-min.js"></script>
</body>
</html>
的main.css
#resumeBd section {
padding-top: 100px;
}