CODEWITHSUNDEEP
jquerycss
bikey77
bikey77

Reputation: 6672

Position elements to bottom of page in combination with toggle button

I'm using stickyfloat.js to keep the .bottom_content div at the bottom of the page so it doesn't cover essential elements when the browser window is small. However, I'd like to add a toggle button to the blue div (where it says "Important texts go here" that will send the div to the window bottom, keeping the page elements underneith the visible window area, until the user scrolls down enough to reveal them. The desired result would look like this: Before & After

The toggle button should also unbind stickyfloat so that it stops repositioning the .bottom_content on page scroll until page is reloaded or until toggle button is clicked again.

The furthest I got was this:

$('#minimize').toggle(function(){
    $cur_pos = $('.bottom_content').offset().top;
        $('.bottom_content').css({'top' : $cur_pos+147+'px'});
    }, function () {
    $('.bottom_content').css({ 'top' : 160+'px'});
});

but it's problematic. I'm no jQuery whiz so I need some help.

I've uploaded an working version and a jsfiddle for anyone who would like to look at the code over their noon coffee. Thanks in advance.

Upvotes: 1

Views: 475

Answers (1)

Rytis
Rytis

Reputation: 96

This task requires a little bit more effort as stickyfloat does not have toggle method, you have to re-initiate it. Result is straightforward: it hides slider if it's visible and displays it if it's hidden. Maybe code will be more helpful:

$('#minimize').click(function() {
  $bottom = $('.bottom_content');
  if ($bottom.hasClass('bottom_content_home')) {
    // remove stickyfloat
    $bottom.css('top', 'auto').stickyfloat('destroy');
  } else {
    // re-initiate stickyfloat (taken from your scripts)
    $bottom.stickyfloat({
      duration: 0,
      stickToBottom: true
    });
  }
  // hide slider
  $('.bc_slider').toggle();
  // this class controls css option 'padding-top'
  $bottom.toggleClass('bottom_content_home');
});

Maybe this will be useful at least in some way.

Upvotes: 1

Related Questions