CODEWITHSUNDEEP
javascriptjquery
red house 87
red house 87

Reputation: 2415

when div reaches certain height in page

I have a portfolio site here.

I have the menu set to scroll when a menu item such as "contact" is clicked to that sections container. When this happens a little arrow on the left moves to show where in the site you are. My problem is when the user scrolls through the site without clicking the menu the arrow doesn't update its position as it is only programmed to move on click of the menu button. I have been thinking of a way to fix this and all I can think of is having the arrow update its position when one of the containers such as "contactcontainer" is at a certain point in the page (ideally when its 20px from the top of the page). Could anyone advise me of a javascript function that would calculate where abouts in the page a div is in relation to the top so I can write the jquery to make the arrow move?

Open to other suggestions if someone has a better way of making this work

Upvotes: 0

Views: 719

Answers (4)

yeyene
yeyene

Reputation: 7380

! UPDATED : to fix onclick menu active status

I made a simple scrollSpy demo here;

DEMO : https://jsfiddle.net/yeyene/up4nu/4735/

No need to use bootstrap or another plugin. Hope your site can integrate with this.

JQUERY

// Cache selectors
var lastId,
topMenu = $("#top-menu"),
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function () {
        var item = $($(this).attr("href"));
        if (item.length) {
            return item;
        }
    });

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function (e) {
    e.preventDefault();
    
    var href = $(this).attr("href"),
        offsetTop = href === "#" ? 0 : $(href).offset().top+1;
    $('html, body').stop().animate({
        scrollTop: offsetTop
    }, 300);
});

// Bind to scroll
$(window).scroll(function () {
    // Get container scroll position
    var fromTop = $(this).scrollTop();

    // Get id of current scroll item
    var cur = scrollItems.map(function () {
        if ($(this).offset().top < fromTop) return this;
    });
    // Get the id of the current element
    cur = cur[cur.length - 1];
    var id = cur && cur.length ? cur[0].id : "";

    if (lastId !== id) {
        lastId = id;
        // Set/remove active class
        menuItems.parent().removeClass("active");
        menuItems.filter("[href=#" + id + "]").parent().addClass("active");
    }
});

HTML

<ul id="top-menu">
    <li class="active"><a href="#">Foo</a></li>
    <li><a href="#bar">Bar</a></li>
    <li><a href="#baz">Baz</a></li>
    <li><a href="#car">Car</a></li>
</ul>
<div id="content">
    <div><a id="foo"></a>Foo</div>
    <div><a id="bar"></a>Bar</div>
    <div><a id="baz"></a>Baz</div>
    <div><a id="car"></a>Car</div>
</div>

CSS

body {
    font-family: Helvetica, Arial;
    height:2200px;
}
#top-menu {
    position: fixed;
    z-index: 1;
    background: white;
    left: 0;
    right: 0;
    top: 0;
    width:25%;
    background:yellow;
}
#top-menu li a{
    float: left;
    width:90%;
    border-bottom:3px solid #fff;
    text-align: center;
    background:yellow;
    color: #aaa;
    text-decoration: none;
    padding:5px 5% 7px 5%;
}
#top-menu a:hover {
    color: #000;
}
#top-menu li.active a {
    color: #000;
    background:url('http://iconshow.me/media/images/ui/ios7-icons/png/16/arrow-left-b.png') no-repeat right;
}
#content {
    float:right;
    width:75%;
}
#content div{
    float:left;
    width:100%;
    height:500px;
    background:#dfdfdf;
    border-bottom:2px solid #fff;
}

Upvotes: 1

Arun Prasath
Arun Prasath

Reputation: 100

you can do this in js function

params  = 'width='+screen.width;
params += ', height='+screen.height;
params += ', top=0, left=0';
params +=', scrollbars=yes,menubar=yes,toolbar=yes';

Upvotes: 0

FlokiTheFisherman
FlokiTheFisherman

Reputation: 234

I dont know if you are you willing to, but, you can use the bootstrap "Scroll Spy" utility. If you wanna know more, here you go!:

http://getbootstrap.com/javascript/#scrollspy

Upvotes: 0

user1102901
user1102901

Reputation: 565

Try

$('.arrow-up-cover').offset();

Used your arrow as an example element.

Edit:

.offset() returns the elements position relative to the document. You can then hook a function to the scroll event and use something like $(window).scrollTop() to keep track of the top of the window as it moves. You just compare .offset() with .scrollTop() to know when to move the arrow.

Upvotes: 0

Related Questions