Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Blake Lieberman
Blake Lieberman
23,772 Points

CSS snag, for fixed submenu bar when scrolling down only on the iphone not the emulator

Hello,

I am in the process of finalizing a fully-custom, fully responsive website, per below: http://blakel11.github.io/starter-kit/app/

There is a bug with the Submenu (Category Filter) that I cannot figure out, and only occurs in the actual (iphone 6s and iphone 6) Mobile View. It works perfectly fine on the Desktop.

Basically, in actual Mobile View on the phone, the Submenu Bar disappears while scrolling down, and then reappears after scrolling back up.

Does anyone know why this is happening?

I have GIFs that demonstrates the bug, per below.

Here is a GIF of what the Submenu Bar looks like on the Desktop Mobile View (works fine): http://recordit.co/RZzmmzNsKJ

Here is a GIF of what the Submenu Bar looks like on the actual (iPhone) mobile view (buggy, disappears and then reappears): http://recordit.co/fWH2A1APrp

Thanks in advance.

Austin Whipple
Austin Whipple
29,847 Points

Hi Blake,

Looks like your links are broken. Any chance you can post new versions of those to help find any possible problems?

Blake Lieberman
Blake Lieberman
23,772 Points

@austinwhipple the forum added a bunch of letters at the end of my links. idk why but its fixed now

miikis
miikis
44,957 Points

It most likely has something to do with the way you are positioning the sub-menu in your JavaScript; it probably can be done more efficiently. Can you post your code?

Blake Lieberman
Blake Lieberman
23,772 Points

its on my github, github.com/blakel11/starter-kit

miikis
miikis
44,957 Points

I know but can you post the relevant piece of code? The relevant html, css and js would be helpful.

Blake Lieberman
Blake Lieberman
23,772 Points

This is the javascript file associated with it. This is from codedrops.

jQuery(document).ready(function($){

    $(window).scroll(function () {
        var y = $(this).scrollTop();

        if (y >= 150) {
            $('.main-header').addClass('condensed');
        }
        else{
            $('.main-header').removeClass('condensed');
        }
    })

    //open/close lateral filter
    $('.cd-filter-trigger').on('click', function(){
        triggerFilter(true);
    });
    $('.cd-filter .cd-close').on('click', function(){
        triggerFilter(false);
    });

    function triggerFilter($bool) {
        var elementsToTrigger = $([$('.cd-filter-trigger'), $('.cd-filter'), $('.cd-tab-filter'), $('.cd-gallery')]);
        elementsToTrigger.each(function(){
            $(this).toggleClass('filter-is-visible', $bool);
        });
    }

    //mobile version - detect click event on filters tab
    var filter_tab_placeholder = $('.cd-tab-filter .placeholder a'),
        filter_tab_placeholder_default_value = 'Select',
        filter_tab_placeholder_text = filter_tab_placeholder.text();

    $('.cd-tab-filter li').on('click', function(event){
        //detect which tab filter item was selected
        var selected_filter = $(event.target).data('type');

        //check if user has clicked the placeholder item
        if( $(event.target).is(filter_tab_placeholder) ) {
            (filter_tab_placeholder_default_value == filter_tab_placeholder.text()) ? filter_tab_placeholder.text(filter_tab_placeholder_text) : filter_tab_placeholder.text(filter_tab_placeholder_default_value) ;
            $('.cd-tab-filter').toggleClass('is-open');

            //check if user has clicked a filter already selected
        } else if( filter_tab_placeholder.data('type') == selected_filter ) {
            filter_tab_placeholder.text($(event.target).text());
            $('.cd-tab-filter').removeClass('is-open');

        } else {
            //close the dropdown and change placeholder text/data-type value
            $('.cd-tab-filter').removeClass('is-open');
            filter_tab_placeholder.text($(event.target).text()).data('type', selected_filter);
            filter_tab_placeholder_text = $(event.target).text();

            //add class selected to the selected filter item
            $('.cd-tab-filter .selected').removeClass('selected');
            $(event.target).addClass('selected');
        }
    });

    //close filter dropdown inside lateral .cd-filter
    $('.cd-filter-block h4').on('click', function(){
        $(this).toggleClass('closed').siblings('.cd-filter-content').slideToggle(300);
    })

    //fix lateral filter and gallery on scrolling
    $(window).on('scroll', function(){
        (!window.requestAnimationFrame) ? fixGallery() : window.requestAnimationFrame(fixGallery);
    });

    function fixGallery() {
        var offsetTop = $('.cd-main-content').offset().top,
            scrollTop = $(window).scrollTop(),
            headerHeight = $('.main-header').height();
        ( scrollTop + headerHeight >= offsetTop ) ? $('.cd-main-content').addClass('is-fixed') : $('.cd-main-content').removeClass('is-fixed');
    }

    /************************************
     MitItUp filter settings
     More details:
     https://mixitup.kunkalabs.com/
     or:
     http://codepen.io/patrickkunka/
     *************************************/

    buttonFilter.init();
    $('#mixContainer').mixItUp({
        controls: {
            enable: false
        },
        callbacks: {
            onMixStart: function(){
                $('.cd-fail-message').fadeOut(200);
            },
            onMixFail: function(){
                $('.cd-fail-message').fadeIn(200);
            }
        }
    });

    //search filtering
    //credits http://codepen.io/edprats/pen/pzAdg
    var inputText;
    var $matching = $();

    var delay = (function(){
        var timer = 0;
        return function(callback, ms){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        };
    })();

    $(".cd-filter-content input[type='search']").keyup(function(){
        // Delay function invoked to make sure user stopped typing
        delay(function(){
            inputText = $(".cd-filter-content input[type='search']").val().toLowerCase();
            // Check to see if input field is empty
            if ((inputText.length) > 0) {
                $('.mix').each(function() {
                    var $this = $(this);

                    // add item to be filtered out if input text matches items inside the title
                    if($this.attr('class').toLowerCase().match(inputText)) {
                        $matching = $matching.add(this);
                    } else {
                        // removes any previously matched item
                        $matching = $matching.not(this);
                    }
                });
                $('#mixContainer').mixItUp('filter', $matching);
            } else {
                // resets the filter to show all item if input is empty
                $('#mixContainer').mixItUp('filter', 'all');
            }
        }, 200 );
    });
});

/*****************************************************
 MixItUp - Define a single object literal
 to contain all filter custom functionality
 *****************************************************/
var buttonFilter = {
    // Declare any variables we will need as properties of the object
    $filters: null,
    groups: [],
    outputArray: [],
    outputString: '',

    // The "init" method will run on document ready and cache any jQuery objects we will need.
    init: function(){
        var self = this; // As a best practice, in each method we will asign "this" to the variable "self" so that it remains scope-agnostic. We will use it to refer to the parent "buttonFilter" object so that we can share methods and properties between all parts of the object.

        self.$filters = $('.cd-main-content');
        self.$container = $('#mixContainer');

        self.$filters.find('.cd-filters').each(function(){
            var $this = $(this);

            self.groups.push({
                $inputs: $this.find('.filter'),
                active: '',
                tracker: false
            });
        });

        self.bindHandlers();
    },

    // The "bindHandlers" method will listen for whenever a button is clicked.
    bindHandlers: function(){
        var self = this;

        self.$filters.on('click', 'a', function(e){
            self.parseFilters();
        });
        self.$filters.on('change', function(){
            self.parseFilters();
        });
    },

    parseFilters: function(){
        var self = this;

        // loop through each filter group and grap the active filter from each one.
        for(var i = 0, group; group = self.groups[i]; i++){
            group.active = [];
            group.$inputs.each(function(){
                var $this = $(this);
                if($this.is('input[type="radio"]') || $this.is('input[type="checkbox"]')) {
                    if($this.is(':checked') ) {
                        group.active.push($this.attr('data-filter'));
                    }
                } else if($this.is('select')){
                    group.active.push($this.val());
                } else if( $this.find('.selected').length > 0 ) {
                    group.active.push($this.attr('data-filter'));
                }
            });
        }
        self.concatenate();
    },

    concatenate: function(){
        var self = this;

        self.outputString = ''; // Reset output string

        for(var i = 0, group; group = self.groups[i]; i++){
            self.outputString += group.active;
        }

        // If the output string is empty, show all rather than none:
        !self.outputString.length && (self.outputString = 'all');

        // Send the output string to MixItUp via the 'filter' method:
        if(self.$container.mixItUp('isLoaded')){
            self.$container.mixItUp('filter', self.outputString);
        }
    }
};
Blake Lieberman
Blake Lieberman
23,772 Points

This is the html in index.html

<main class="cd-main-content">
  <div class="cd-tab-filter-wrapper">
    <div class="cd-tab-filter">
      <ul class="cd-filters null-padding">
        <li class="placeholder">
          <a data-type="all" href="#0">All</a> <!-- selected option on mobile -->
        </li>
        <li class="filter" data-filter="all"><a class="selected" href="#0">All</a></li>
        <li class="filter" data-filter=".siri"><a href="#0">Alarm</a></li>
        <li class="filter" data-filter=".message"><a href="#0">Browser</a></li>
        <li class="filter" data-filter=".photo"><a href="#0">Camera</a></li>
        <li class="filter" data-filter=".color-2"><a href="#0">Messaging</a></li>
        <li class="filter" data-filter=".color-1"><a href="#0">Settings</a></li>
        <li class="filter" data-filter=".color-2"><a href="#0">Siri</a></li>
        <li class="filter" data-filter=".color-5"><a href="#0">Tools</a></li>
      </ul> <!-- cd-filters -->
    </div> <!-- cd-tab-filter -->
  </div> <!-- cd-tab-filter-wrapper -->
  <section id="mixContainer" class="container-fluid cd-gallery">
    <div class="row">
      <div class="col-sm-6 col-lg-4 mix siri">
        <figure class="card-container">
          <div class="card">
            <img class="img-responsive card-img-top" src="./images/ios9-notes-app-upgrade.jpg" alt="ios9-notes-app-upgrade">
            <figcaption class="card-block">
              <h2 class="card-title text-center">iOS 9 Notes App on iPhone is Amazeballs. But first–upgrade and resync your notes.</h2>
            </figcaption>
          </div>
          <p class="date-footer text-center">
            September 30, 2015
          </p>
          <p class="icon-links text-center">
            <i class="md-trigger fa fa-comment hidden-md-up" data-modal="modal-1"><span>Text</span></i>
            <i class="fa fa-envelope hidden-sm-down"><span>Email</span></i>
            <a href="#"><i class="fa fa-facebook"><span>Share</span></i></a>
            <a href="#"><i class="fa fa-twitter"><span>Share</span></i></a>
          </p>
        </figure>
      </div>
      <div class="col-sm-6 col-lg-4 mix photo">
        <figure class="card-container">
          <div class="card">
            <img class="img-responsive card-img-top" src="./images/slo-mo-videos.jpg" alt="slo-mo-videos">
            <figcaption class="card-block">
              <h2 class="card-title text-center">Wanna see how things look in Slo-Mo? Here’s how to do it with your iPhone!</h2>
            </figcaption>
          </div>
          <p class="date-footer text-center">
            September 29, 2015
          </p>
          <p class="icon-links text-center">
            <i class="md-trigger fa fa-comment hidden-md-up" data-modal="modal-1"><span>Text</span></i>
            <i class="fa fa-envelope hidden-sm-down"><span>Email</span></i>
            <a href="#"><i class="fa fa-facebook"><span>Share</span></i></a>
            <a href="#"><i class="fa fa-twitter"><span>Share</span></i></a>
          </p>
        </figure>
      </div>
      <div class="clearfix hidden-lg-up hidden-xs-down"></div>
      <div class="col-sm-6 col-lg-4 mix siri">
        <figure class="card-container">
          <div class="card">
            <img class="img-responsive card-img-top" src="./images/siri-find-film.jpg" alt="siri-find-film">
            <figcaption class="card-block">
              <h2 class="card-title text-center">Let’s watch a movie tonight! How to find movies and showtimes with Siri</h2>
            </figcaption>
          </div>
          <p class="date-footer text-center">
            September 28, 2015
          </p>
          <p class="icon-links text-center">
            <i class="md-trigger fa fa-comment hidden-md-up" data-modal="modal-1"><span>Text</span></i>
            <i class="fa fa-envelope hidden-sm-down"><span>Email</span></i>
            <a href="#"><i class="fa fa-facebook"><span>Share</span></i></a>
            <a href="#"><i class="fa fa-twitter"><span>Share</span></i></a>
          </p>
        </figure>
      </div>
      <div class="clearfix hidden-md-down"></div>
      <div class="col-sm-6 col-lg-4 mix message">
        <figure class="card-container">
          <div class="card">
            <img class="img-responsive card-img-top" src="./images/ios9-update-cleanup-storage-space.jpg" alt="ios9-update-cleanup-storage-space">
            <figcaption class="card-block">
              <h2 class="card-title text-center">Update to iOS 9 Now! But I don’t have space on my iPhone? Help!!</h2>
            </figcaption>
          </div>
          <p class="date-footer text-center">
            September 27, 2015
          </p>
          <p class="icon-links text-center">
            <i class="md-trigger fa fa-comment hidden-md-up" data-modal="modal-1"><span>Text</span></i>
            <i class="fa fa-envelope hidden-sm-down"><span>Email</span></i>
            <a href="#"><i class="fa fa-facebook"><span>Share</span></i></a>
            <a href="#"><i class="fa fa-twitter"><span>Share</span></i></a>
          </p>
        </figure>
      </div>
      <div class="clearfix hidden-lg-up hidden-xs-down"></div>
      <div class="col-sm-6 col-lg-4 mix message">
        <figure class="card-container">
          <div class="card">
            <img class="img-responsive card-img-top" src="./images/make-everything-bigger.jpg" alt="make-everything-bigger">
            <figcaption class="card-block">
              <h2 class="card-title text-center">Is everything just too small to see on your iPhone? Here’s how to make EVERYTHING bigger!</h2>
            </figcaption>
          </div>
          <p class="date-footer text-center">
            September 26, 2015
          </p>
          <p class="icon-links text-center">
            <i class="md-trigger fa fa-comment hidden-md-up" data-modal="modal-1"><span>Text</span></i>
            <i class="fa fa-envelope hidden-sm-down"><span>Email</span></i>
            <a href="#"><i class="fa fa-facebook"><span>Share</span></i></a>
            <a href="#"><i class="fa fa-twitter"><span>Share</span></i></a>
          </p>
        </figure>
      </div>
      <div class="col-sm-6 col-lg-4 mix siri">
        <figure class="card-container">
          <div class="card">
            <img class="img-responsive card-img-top" src="./images/hotspot-iphone.jpg" alt="hotspot-iphone">
            <figcaption class="card-block">
              <h2 class="card-title text-center">Set up Your iPhone’s WiFi Hotspot like a Pro</h2>
            </figcaption>
          </div>
          <p class="date-footer text-center">
            September 25, 2015
          </p>
          <p class="icon-links text-center">
            <i class="md-trigger fa fa-comment hidden-md-up" data-modal="modal-1"><span>Text</span></i>
            <i class="fa fa-envelope hidden-sm-down"><span>Email</span></i>
            <a href="#"><i class="fa fa-facebook"><span>Share</span></i></a>
            <a href="#"><i class="fa fa-twitter"><span>Share</span></i></a>
          </p>
        </figure>
      </div>
    </div>
  </section>
  <!--<section class="container-fluid card-deck-wrapper">-->
  <!--<div class="col-sm-6 col-lg-4 card-deck effect-zoe mix color-1 check1 radio2 option3">-->
  <!--<div class="card">-->
  <!--<img class="img-responsive card-img-top" src="./images/giftutors-iphone-about.jpg" alt="giftutors-iphone-about">-->
  <!--<div class="card-block">-->
  <!--<h2 class="card-title text-center">Welcome to GIFtutors! We’re here to end Phone Anger, one GIF tutorial at a time.</h2>-->
  <!--<p class="icon-links effect-zoe">-->
  <!--<i class="md-trigger fa fa-comment" data-modal="modal-1"></i>-->
  <!--<a href="#"><i class="fa fa-facebook"></i></a>-->
  <!--<a href="#"><i class="fa fa-twitter"></i></a>-->
  <!--</p>-->
  <!--</div>-->
  <!--</div>-->
  <!--</div>&lt;!&ndash; end of asset 1 &ndash;&gt;-->
  <!--<div class="col-sm-6 col-lg-4 card-deck mix color-1 check1 radio2 option3">-->
  <!--<div class="card">-->
  <!--<img class="img-responsive card-img-top" src="./images/slo-mo-videos.jpg" alt="slo-mo-videos">-->
  <!--<div class="card-block">-->
  <!--<h2 class="card-title text-center">Wanna see how things look in Slo-Mo? Here’s how to do it with your iPhone!</h2>-->
  <!--<p class="icon-links effect-zoe">-->
  <!--<i class="md-trigger fa fa-comment" data-modal="modal-1"></i>-->
  <!--<a href="#"><i class="fa fa-facebook"></i></a>-->
  <!--<a href="#"><i class="fa fa-twitter"></i></a>-->
  <!--</p>-->
  <!--</div>-->
  <!--</div>-->
  <!--</div> &lt;!&ndash; end of asset 2 &ndash;&gt;-->
  <!--<div class="col-sm-6 col-lg-4 card-deck mix color-1 check1 radio2 option3">-->
  <!--<div class="card">-->
  <!--<img class="img-responsive card-img-top" src="./images/siri-find-film.jpg" alt="siri-find-film">-->
  <!--<div class="card-block">-->
  <!--<h2 class="card-title text-center">Let’s watch a movie tonight! How to find movies and showtimes with Siri</h2>-->
  <!--<p class="icon-links effect-zoe">-->
  <!--<i class="md-trigger fa fa-comment" data-modal="modal-1"></i>-->
  <!--<a href="#"><i class="fa fa-facebook"></i></a>-->
  <!--<a href="#"><i class="fa fa-twitter"></i></a>-->
  <!--</p>-->
  <!--</div>-->
  <!--</div>-->
  <!--</div>&lt;!&ndash; end of asset 3 &ndash;&gt;-->
  <!--<div class="col-sm-6 col-lg-4 card-deck mix color-1 check1 radio2 option3">-->
  <!--<div class="card">-->
  <!--<img class="img-responsive card-img-top" src="./images/ios9-update-cleanup-storage-space.jpg" alt="ios9-update-cleanup-storage-space">-->
  <!--<div class="card-block">-->
  <!--<h2 class="card-title text-center">Update to iOS 9 Now! But I don’t have space on my iPhone? Help!!</h2>-->
  <!--<p class="icon-links effect-zoe">-->
  <!--<i class="md-trigger fa fa-comment" data-modal="modal-1"></i>-->
  <!--<a href="#"><i class="fa fa-facebook"></i></a>-->
  <!--<a href="#"><i class="fa fa-twitter"></i></a>-->
  <!--</p>-->
  <!--</div>-->
  <!--</div>-->
  <!--</div> &lt;!&ndash; end of asset 4 &ndash;&gt;-->
  <!--<div class="col-sm-6 col-lg-4 card-deck mix color-1 check1 radio2 option3">-->
  <!--<div class="card">-->
  <!--<img class="img-responsive card-img-top" src="./images/make-everything-bigger.jpg" alt="make-everything-bigger">-->
  <!--<div class="card-block">-->
  <!--<h2 class="card-title text-center">Is everything just too small to see on your iPhone? Here’s how to make EVERYTHING bigger!</h2>-->
  <!--<p class="icon-links effect-zoe">-->
  <!--<i class="md-trigger fa fa-comment" data-modal="modal-1"></i>-->
  <!--<a href="#"><i class="fa fa-facebook"></i></a>-->
  <!--<a href="#"><i class="fa fa-twitter"></i></a>-->
  <!--</p>-->
  <!--</div>-->
  <!--</div>-->
  <!--</div> &lt;!&ndash; end of asset 5 &ndash;&gt;-->
  <!--<div class="col-sm-6 col-lg-4 card-deck mix color-1 check1 radio2 option3">-->
  <!--<div class="card">-->
  <!--<img class="img-responsive card-img-top" src="./images/hotspot-iphone.jpg" alt="hotspot-iphone">-->
  <!--<div class="card-block">-->
  <!--<h2 class="card-title text-center">Set up Your iPhone’s WiFi Hotspot like a Pro</h2>-->
  <!--<p class="icon-links effect-zoe">-->
  <!--<i class="md-trigger fa fa-comment" data-modal="modal-1"></i>-->
  <!--<a href="#"><i class="fa fa-facebook"></i></a>-->
  <!--<a href="#"><i class="fa fa-twitter"></i></a>-->
  <!--</p>-->
  <!--</div>-->
  <!--</div>-->
  <!--</div> &lt;!&ndash; end of asset 6 &ndash;&gt;-->
  <!--<div class="cd-fail-message">No results found</div>-->
  <!--</section> &lt;!&ndash; cd-gallery &ndash;&gt;-->

  <div class="cd-filter">
    <form>
      <div class="cd-filter-block">
        <h4>Search</h4>

        <div class="cd-filter-content">
          <input type="search" placeholder="Search">
        </div> <!-- cd-filter-content -->
      </div> <!-- cd-filter-block -->
      <div class="cd-filter-block">
        <h4>Check boxes</h4>
        <ul class="cd-filter-content cd-filters list">
          <li>
            <input class="filter" data-filter=".check1" type="checkbox" id="checkbox1">
            <label class="checkbox-label" for="checkbox1">Alarm</label>
          </li>

          <li>
            <input class="filter" data-filter=".check2" type="checkbox" id="checkbox2">
            <label class="checkbox-label" for="checkbox2">Siri</label>
          </li>

          <li>
            <input class="filter" data-filter=".check3" type="checkbox" id="checkbox3">
            <label class="checkbox-label" for="checkbox3">Settings</label>
          </li>
        </ul> <!-- cd-filter-content -->
      </div> <!-- cd-filter-block -->

      <!--<div class="cd-filter-block">-->
      <!--<h2>Select</h2>-->

      <!--<div class="cd-filter-content">-->
      <!--<div class="cd-select cd-filters">-->
      <!--<select class="filter" name="selectThis" id="selectThis">-->
      <!--<option value="">Choose an option</option>-->
      <!--<option value=".option1">Option 1</option>-->
      <!--<option value=".option2">Option 2</option>-->
      <!--<option value=".option3">Option 3</option>-->
      <!--<option value=".option4">Option 4</option>-->
      <!--</select>-->
      <!--</div> &lt;!&ndash; cd-select &ndash;&gt;-->
      <!--</div> &lt;!&ndash; cd-filter-content &ndash;&gt;-->
      <!--</div> &lt;!&ndash; cd-filter-block &ndash;&gt;-->

      <!--<div class="cd-filter-block">-->
      <!--<h2>Radio buttons</h2>-->

      <!--<ul class="cd-filter-content cd-filters list">-->
      <!--<li>-->
      <!--<input class="filter" data-filter="" type="radio" name="radioButton" id="radio1" checked>-->
      <!--<label class="radio-label" for="radio1">All</label>-->
      <!--</li>-->

      <!--<li>-->
      <!--<input class="filter" data-filter=".radio2" type="radio" name="radioButton" id="radio2">-->
      <!--<label class="radio-label" for="radio2">Choice 2</label>-->
      <!--</li>-->

      <!--<li>-->
      <!--<input class="filter" data-filter=".radio3" type="radio" name="radioButton" id="radio3">-->
      <!--<label class="radio-label" for="radio3">Choice 3</label>-->
      <!--</li>-->
      <!--</ul> &lt;!&ndash; cd-filter-content &ndash;&gt;-->
      <!--</div> &lt;!&ndash; cd-filter-block &ndash;&gt;-->
    </form>

    <a href="#0" class="cd-close">Close</a>
  </div> <!-- cd-filter -->

  <a href="#0" class="cd-filter-trigger">Filters</a>
</main> <!-- cd-main-content -->
Blake Lieberman
Blake Lieberman
23,772 Points

This is the scss file associated with this section in app/styles/_content-filter.scss

/* --------------------------------

Main Components

-------------------------------- */

.cd-header {
  position: relative;
  height: 150px;
  background-color: $color-5;

  h1 {
    color: $color-7;
    line-height: 150px;
    text-align: center;
    font-size: 2.4rem;
    font-weight: 300;
  }

  @include MQ(L) {
    height: 180px;

    h1 {
      line-height: 180px;
    }
  }
}

.cd-main-content {
  position: relative;
  min-height: 100vh;
  @include clearfix;

  &.is-fixed {
    .cd-tab-filter-wrapper {
      position: fixed;
      top: $header-height-mobile;
      left: 0;
      width: 100%;
      box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(0, 0, 0, 0.05);

      @media (min-width: $xs-breakpoint) {
        top: $header-height-S;
      }
    }
    .cd-gallery {
      padding-top: 55px;
    }


    .cd-filter {
      position: fixed;
      height: 100vh;
      overflow: hidden;
      top: $header-height-mobile;

      form {
        height: 100vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }
    }

    .cd-filter-trigger {
      position: fixed;
      top: $header-height-S;
    }

    @include MQ(M) {
      .cd-gallery {
        padding-top: 0px+$tab-filter-height;
      }
    }

    @include MQ(L) {
      .cd-gallery {
        padding-top: 0px+$tab-filter-height;
      }
    }
  }
}

/* --------------------------------

xtab-filter

-------------------------------- */

.cd-tab-filter-wrapper {
  background-color: $color-7;
  box-shadow: 0 1px 1px rgba(#000, .08);
  z-index: 1;
  @include clearfix;

  .is-fixed & {
    box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(0, 0, 0, 0.05);
  }
}

.cd-tab-filter {
  /* tabbed navigation style on mobile - dropdown */
  position: relative;
  width: 140px;
  height: 52px;
  margin: 0 auto;
  z-index: 1;

  &::after {
    /* small arrow icon */
    content:'';
    position: absolute;
    right: 14px;
    @include center(y); // see partials > mixins

    display: inline-block;
    width: 16px;
    height: 16px;

    background: url('../images/cd-icon-arrow.svg') no-repeat center center;

    @include transition(all .3s);
    pointer-events: none;
  }

  ul {
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(0, 0, 0, 0.05);

    background-color: $color-7;
  }

  li {
    display: none;

    &:first-child {
      /* this way the placehodler is alway visible */
      display: block;
    }
  }

  a {
    display: block;
    /* set same size of the .cd-tab-filter */
    height: $tab-filter-height;
    width: 140px;
    line-height: $tab-filter-height;
    padding-left: 14px;
    font-size: 18px;

    &.selected {
      background: $dark-color;
      color: $main-color;
    }
  }

  &.is-open {

    &::after {
      /* small arrow rotation */
      @include transform(translateY(-50%) rotate(-180deg));
    }

    ul {
      box-shadow: inset 0 -2px 0 $color-6, 0 2px 10px rgba(#000, .2);
    }

    ul li {
      display: block;
    }

    .placeholder a {
      /* reduces the opacity of the placeholder on mobile when the menu is open */
      opacity: .4;
    }
  }

  @include MQ(M) {
    /* tabbed navigation style on medium devices */
    width: auto;
    cursor: auto;

    &::after {
      /* hide the arrow */
      display: none;
    }

    ul {
      background: transparent;
      position: static;
      box-shadow: none;
      text-align: center;
      margin: 0;
    }

    li {
      display: inline-block;

      &.placeholder {
        display: none !important;
      }
    }

    a {
      display: inline-block;
      padding: 0 1em;
      width: auto;

      color: $color-8;
      text-transform: uppercase;
      font-weight: 700;
      font-size: .9rem;

      .no-touch &:hover {
        color: $color-6;
      }

      &.selected {
        background: transparent;
        color: $color-6;
        /* create border bottom using box-shadow property */
        box-shadow: inset 0 -2px 0 $color-6;
      }
    }

    &.is-open {
      ul li {
        display: inline-block;
      }
    }
  }

  @include MQ(L) {
    /* tabbed navigation on big devices */
    width: 100%;
    float: right;
    margin: 0;
    @include transition(width .3s);

    &.filter-is-visible {
      /* reduce width when filter is visible */
      width: 80%;
    }
  }
}

/* --------------------------------

xgallery

-------------------------------- */

.cd-gallery {
  padding-bottom:26px;

  //@media (min-width:$xs-breakpoint) {
  //  padding-left: 5%;
  //  padding-right: 5%;
  //}
  //
  //> ul {
  //  padding-left: 0;
  //  text-align: center;
  //
  //  @media (min-width: $sm-breakpoint) {
  //    padding-left: 40px;
  //  }
  //}

  li {

    // box-shadow: 0 1px 4px rgba(#000, .1);
    display: none;

    @media (min-width: $xs-breakpoint) {
      margin-bottom: 1.6em;
    }

    &.gap {
      /* used in combination with text-align: justify to align gallery elements */
      opacity: 0;
      height: 0;
      display: inline-block;
    }
  }

  img {
    display: block;
    width: 100%;
  }

  .cd-fail-message {
    display: none;
    text-align: center;
  }

  @include MQ(M) {
    padding: 0px 3%;

    ul {
      @include clearfix;
      text-align: center;
    }

    li {
      width: 48%;
      margin-bottom: 2em;
    }
  }

  @include MQ(L) {
    padding: 0px 2%;
    float: right;
    @include transition(width .3s);

    li {
      width: 33%;
    }

    &.filter-is-visible {
      /* reduce width when filter is visible */
      width: 80%;
    }
  }
}

/* --------------------------------

xfilter

-------------------------------- */

.cd-filter {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background: $color-7;
  box-shadow: 4px 4px 20px rgba(#000, 0);
  z-index: 2;

  /* Force Hardware Acceleration in WebKit */
  @include transform(translateZ(0));
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  @include transform(translateX(-100%));
  @include transition(transform .3s, box-shadow .3s);

  &::before {
    /* top colored bar */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: $tab-filter-height;
    width: 100%;
    background-color: $color-6;
    z-index: 2;
  }

  form {
    padding: $tab-filter-height+20px 20px;
  }

  .cd-close {
    position: absolute;
    top: 0;
    right: 0;
    height: $tab-filter-height;
    line-height: $tab-filter-height;
    width: 60px;
    color: $color-7;
    text-align: center;

    background: darken($color-6, 5%);
    opacity: 0;

    @include transition(opacity .3s);
    z-index: 3;

    .no-touch &:hover {
      background: darken($color-6, 8%);
    }
  }

  &.filter-is-visible {
    @include transform(translateX(0));
    box-shadow: 4px 4px 20px rgba(#000, .2);

    .cd-close {
      opacity: 1;
    }
  }

  @include MQ(L) {
    width: 20%;

    form {
      padding: $tab-filter-height+20px 10%;
    }
  }
}

.cd-filter-trigger {
  position: absolute;
  top: 0;
  left: 0;
  height: $tab-filter-height;
  line-height: $tab-filter-height;
  width: 60px;

  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  color: transparent;
  white-space: nowrap;
  background: transparent url('../images/cd-icon-filter.svg') no-repeat center center;

  z-index: 3;

  &.filter-is-visible {
    pointer-events: none;
  }

  @include MQ(L) {
    width: auto;
    left: 2%;

    text-indent: 0;
    color: $color-8;
    text-transform: uppercase;
    font-size: .9rem;
    font-weight: 700;

    padding-left: 24px;
    background-position: left center;

    @include transition(color .3s);

    .no-touch &:hover {
      color: $color-6;
    }

    &.filter-is-visible,
    &.filter-is-visible:hover {
      color: $color-7;
    }
  }
}

/* --------------------------------

xcustom form elements

-------------------------------- */
.cd-filter-content {
  padding-left: 0;
  list-style: none;
}

.cd-filter-block {
  margin-bottom: 1.2rem;

  h4 {
    /* filter block title */
    position: relative;
    font-size: 1.2rem;
    margin-bottom: .2em;
    padding: 10px 0 10px 20px;
    color: $color-8;
    text-transform: uppercase;
    font-weight: 700;

    @include user-select(none);
    cursor: pointer;

    .no-touch &:hover {
      color: $color-6;
    }

    &::before {
      /* arrow */
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      width: 16px;
      height: 16px;
      background: url('../images/cd-icon-arrow.svg') no-repeat center center;

      @include transform(translateY(-50%));
      @include transition(transform .3s);
    }

    &.closed::before {
      @include transform(translateY(-50%) rotate(-90deg));
    }
  }

  input, select,
  .radio-label::before,
  .checkbox-label::before {
    /* shared style for input elements */
    font-family: $primary-font-2;
    border-radius: 0;
    background-color: $color-7;
    border: 2px solid darken($color-7, 10%);
  }

  input[type='search'],
  input[type='text'],
  select {
    max-width: 100%;
    width: 11rem;
    padding: .4em;
    font-size: 1.3rem;
    @include appearance(none);
    box-shadow: none;

    &:focus {
      outline: none;
      background-color: $color-7;
      border-color: $color-6;
    }
  }

  input[type='search'] {
    /* custom style for the search element */
    border-color: transparent;
    background-color: darken($color-7, 10%);
    /* prevent jump - ios devices */
  }

  input[type='search']::-webkit-search-cancel-button {
    display: none;
  }

  .cd-select {
    /* select element wrapper */
    position: relative;
  }

  .cd-select::after {
    /* switcher arrow for select element */
    content: '';
    position: absolute;
    z-index: 1;
    right: 14px;
    top: 50%;
    @include transform(translateY(-50%));

    display: block;
    width: 16px;
    height: 16px;

    background: url('../images/cd-icon-arrow.svg') no-repeat center center;
    pointer-events: none;
  }

  select {
    cursor: pointer;
    font-size: 1.4rem;
  }

  select::-ms-expand {
    display: none;
  }

  .list li {
    position: relative;
    margin-bottom: .8em;

    &:last-of-type {
      margin-bottom: 0;
    }
  }

  input[type=radio],
  input[type=checkbox] {
    /* hide original check and radio buttons */
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    z-index: 2;
  }

  .checkbox-label,
  .radio-label {
    padding-left: 24px;
    font-size: 1rem;
    margin-top: 4px;
    color: $content-filter-color;
    @include user-select(none);

    &::before,
    &::after {
      /* custom radio and check boxes */
      content: '';
      display: block;
      position: absolute;
      top: 40%;
      @include transform(translateY(-50%));
    }

    &::before {
      width: 16px;
      height: 16px;
      left: 0;
    }

    &::after {
      /* check mark - hidden */
      display: none;
    }
  }

  .checkbox-label::after {
    /* check mark style for check boxes */
    width: 16px;
    height: 16px;
    background: url('../images/cd-icon-check.svg') no-repeat center center;
  }

  .radio-label::before,
  .radio-label::after {
    border-radius: 50%;
  }

  .radio-label::after {
    /* check mark style for radio buttons */
    width: 6px;
    height: 6px;
    background-color: $color-7;
    left: 5px;
  }

  input[type=radio]:checked + label::before,
  input[type=checkbox]:checked + label::before {
    border-color: $color-6;
    background-color: $color-6;
  }

  input[type=radio]:checked + label::after,
  input[type=checkbox]:checked + label::after {
    display: block;
  }
}

@-moz-document url-prefix(){
  /* hide custom arrow on Firefox - select element */
  .cd-filter-block .cd-select::after {
    display: none;
  }
}

div.cd-filters {
  padding: 0;
}

.cd-tab-filter a.selected {
  color: $main-color;
  box-shadow: inset 0 -2px 0 $main-color;
}
a:hover, a:focus {
  color: $main-color $i;
  text-decoration: none;
}

.cd-filter::before {
  background-color: $dark-color;
}

.cd-filter .cd-close {
  background: #222;
}

.cd-filter-block input[type='search']:focus, .cd-filter-block input[type='text']:focus, .cd-filter-block select:focus {
  border-color: $main-color;
}

.cd-filter.filter-is-visible .cd-close {
  text-decoration: none;
}
miikis
miikis
44,957 Points

Where's the javascript that's applying the is-fixed class to the main element? Is that the plugin?

Blake Lieberman
Blake Lieberman
23,772 Points

This is in the middle of the javascript file I shared at the top.

 //fix lateral filter and gallery on scrolling
    $(window).on('scroll', function(){
        (!window.requestAnimationFrame) ? fixGallery() : window.requestAnimationFrame(fixGallery);
    });

    function fixGallery() {
        var offsetTop = $('.cd-main-content').offset().top,
            scrollTop = $(window).scrollTop(),
            headerHeight = $('.main-header').height();
        ( scrollTop + headerHeight >= offsetTop ) ? $('.cd-main-content').addClass('is-fixed') : $('.cd-main-content').removeClass('is-fixed');
miikis
miikis
44,957 Points

So why aren't you just calling fixGallery() on scroll? Why are you using requestAnimationFrame?

Blake Lieberman
Blake Lieberman
23,772 Points

This is what the plugin had placed. I can remove it do you know what requestAnimation does?

miikis
miikis
44,957 Points

requestAnimationFrame is a more performance-optimized way of doing a setInterval() — here's a link.

But there's no timed loop necessary here so I don't know why you're using it... All you should need to do is add a class of "is-fixed" when the "window.scroll" event is triggered.

Blake Lieberman
Blake Lieberman
23,772 Points

That didn't fix it.

Blake Lieberman
Blake Lieberman
23,772 Points

I realized that while you a scrolling with touch or still touching the iphone it wont should but once it stops or you arent touching the screen it comes back.