scroll() method and page height

Hi all.
In a Bootstrap page I have a top bar which is set to be fixed (css style). There is a left side bar enclosed in a col-lg-12 which have to be fixed too: to get this I use javascript because setting it to "position: fixed" in css breaks the layout making the col-lg-10 which is in the same row slide to the left.
The javascript I use is this:
	var element = jQuery('.menu-profile'),
			originalY = element.offset().top,
			topMargin = 80;
	jQuery(window).on('scroll', function () {
		var scrollTop = jQuery(window).scrollTop();
		element.animate({
			top: scrollTop - originalY + topMargin
		}, 0);
	});

Open in new window


The code works well but it has the side-effect to give my page an infinite height: the user can scroll without stopping even if there is no more content to see.
I'm not able to fix this.
You can see the page here: http://bcfolder.webintenerife.com/profile.php
Thank you to all in advance.
LVL 32
Marco GasiFreelancerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
As a matter of interest why are you including your left sidebar in the main document flow?

Why not do something like
<div id="sidebar" style="position: fixed; left: 0; top: 50px; width: 195px;">
...
</div>
<div id="maincontent" margin-left: 210px">
   <div class="row">
        <div class="col-md-6">
        ....
       <!-- rest of code here -->
        ....
        </div>
   </div>
</div>

Open in new window

0
Marco GasiFreelancerAuthor Commented:
Hi Julian.
Maybe I'm wrong, but in my thought, using Bootstrap I can't do what you suggest: my widths are in percentage. The left sidebar is resizable: clicking on the orange arrow in the yellow top bar, both the yellow section of the top bar and the sidebar are resized and the main content smoothly slide to the left without any additional code.
In addition, even I still didn't write related rules, resizing the browser window, columns resize themselves following Bootstrap rules.
I'm not sure about this, maybe I'm missing something, but I fear using pixels as unit can create more problems than the ones it can solve...
Are these doubts      unfounded?
0
Julian HansenCommented:
Ok, got it - but if you look at your site in responsive mode and make it small the side bar resizes itself until it is much too small to contain its contents.

Also, you can easily achieve slideout with % values - simply left a negative %

As an example take a look at this template - it has what you want to do built in - you can either copy or adapt.

https://almsaeedstudio.com/preview
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

Marco GasiFreelancerAuthor Commented:
Good template! I've missed it :-) Thank you
0
Julian HansenCommented:
You are welcome - I have been using it a lot (or bits of it) - if you go to the main site there are some others there that are paid templates (but cheap at the price) that essentially follow the same principles but with far more functionality.
0
Marco GasiFreelancerAuthor Commented:
Thank you again for the surplus info :-)
0
Julian HansenCommented:
You are welcome Marco,
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.