some more logic is required for proper scrolling of menu bar

This commit is contained in:
Prashant Singh 2019-03-14 15:50:24 +05:30
parent 556dd64327
commit 319e4edeb1
2 changed files with 42 additions and 27 deletions

View File

@ -9,6 +9,47 @@ Vue.prototype.$http = axios
window.eventBus = new Vue();
window.onload = function () {
st = $(document).scrollTop();
initialScroll = st;
windowHeight = $(window).height();
documentHeight = $(document).height();
menubarHeight = $('ul.menubar').height();
// console.log(windowHeight, menubarHeight);
if (menubarHeight > windowHeight ) {
remainent = documentHeight - menubarHeight;
travelRatio = remainent / (documentHeight - windowHeight);
}
// if(initialScroll > windowHeight) {
// fold =
// }
marginTopForMenubar = travelRatio * initialScroll;
console.log(initialScroll, travelRatio, marginTopForMenubar);
// if(menubarHeight > windowHeight && initialScroll > 0) {
// marginTopForMenubar = travelRatio * initialScroll;
// console.log(marginTopForMenubar);
// // $('.navbar-left').css('top', + 60 - marginTopForMenubar);
// }
// $(document).scroll(function() {
// st = $(document).scrollTop();
// if (menubarHeight > windowHeight) {
// if (initialScroll == 0 && st < (windowHeight - 60)) {
// marginTopForMenubar = travelRatio * st;
// $('.navbar-left').css('top', + 60 - marginTopForMenubar);
// }
// }
// });
}
$(document).ready(function () {
var lastScrollTop = 0;

View File

@ -32,30 +32,4 @@
{{-- <div class="close-nav-aside">
<i class="icon angle-left-icon close-icon"></i>
</div> --}}
</div>
@push('scripts')
<script>
window.onload = function () {
st = $(document).scrollTop();
windowHeight = $(window).height();
documentHeight = $(document).height();
menubarHeight = $('ul.menubar').height();
if (menubarHeight > windowHeight) {
remainent = documentHeight - menubarHeight;
travelRatio = remainent / (documentHeight - windowHeight);
}
$(document).scroll(function() {
st = $(document).scrollTop();
if (menubarHeight > windowHeight && st < (windowHeight - 60)) {
marginTopForMenubar = travelRatio * st;
$('.navbar-left').css('top', + 60 - marginTopForMenubar);
}
});
}
</script>
@endpush
</div>