Bootstrap - Scrollspy scrolling skipping second to

I am having an issue with Bootstrap ScrollSpy in regards to the scrolling position of a selected element. The issue occurs at the bottom of the page, where I have two relatively short sections of content. When I either directly select the Projects section or scroll to it, the Education section will be highlighted instead of the Projects section. How would I offset/fix the scrolling position to select the correct section? I previously attempted to fix this by moving the anchor up into the previous section but only had limited success. The only other option I currently see is to restructure my content. Before I do that I would like to see if there are any other solutions, since I am encountering this exact issue on a second project.

The issue can be viewed here: http://beta.joshuabock.com/resume.html

Each of the sections is structured in the same way:

<section>
    <h3>Projects</h3>
    <p>Project Title</p>
    <ul>
        <li>Bullet Point</li>
        <li>Bullet Point</li>
    </ul>
</section>

Thanks in advance.

标签： twitter-bootstrap scrollspy

1条回答

乱世女痞

2楼-- · 2019-07-17 08:02

Ok I made it work. First of all

<nav id="resume-nav" class="sidebar-nav">
    <ul id="resume-nav" class="nav nav-list">

you have the same id for your nav and your ul. Remove it from your ul. Second try putting

padding-top:30px;

To every one of your sections (just add a class, just to give them some space between). Last and most important remove

data-offset="0"

from your body tag. The default value is 10 and with the 30px of padding it will give it some space, so when you select a section it takes you to a space that belongs to the section that you selected. Maybe another value would be better, just play with it, until you have what you want. But overall this is what is causing your problems.

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 &amp; 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 &#39;tags&#39; 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>&copy; 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;
}

0人赞添加讨论(0) 举报

Bootstrap - Scrollspy scrolling skipping second to

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间